MUI - 컴포넌트를 중앙/오른쪽에 정렬하는 방법

MUI - 컴포넌트를 중앙/오른쪽에 정렬하는 방법

버튼을 부모 오른쪽에 맞추고 싶습니다.

MUI에서 할 수 있는 방법이 있는지 궁금합니다.다음을 사용할 수 있습니다.

<Grid container justify="flex-end">

하지만 그렇게 되면 다른 걸 써야 할 거야<Grid item />일이 너무 많은 것 같아요.

아니면 그냥 오래된 CSS를 사용하는 게 나을 수도 있고float: right원소의 겉으로 보이는 영점 높이를 다루고 있습니다.

MUI 5 이전:

이거 드셔보세요

<Grid container justify="flex-end">
     <Button>Example</Button>
</Grid>

MUI 5 업데이트: (Dipak 덕분에)

소품justify의ForwardRef(Grid)는 권장되지 않습니다.사용하다justifyContent대신 소품 이름이 바뀌었습니다.

<Grid container justifyContent="flex-end">
     <Button>Example</Button>
</Grid>

업데이트: 최적의 솔루션은 Near Huscarl의 답변입니다. 그리드보다 스택을 사용하는 것이 좋습니다.

항목 정렬을 원하는 경우<Grid item>당신은 포장을 사용할 수 있다.Box컴포넌트:

<Grid container>
  <Grid item sm={6}>
    <Box display="flex" justifyContent="flex-end">
      <Button>Button Aligned To The Right</Button>
    </Box>
  </Grid>
</Grid>

위치 지정 옵션에 대한 자세한 내용은 문서를 참조하십시오.

MUI v5에서는 를 사용하여 성분 집합을 행 또는 열에 표시할 수 있습니다. Stackflexbox이기 때문에 설정만 하면 됩니다.justifyContent안에 있는 항목을 정렬하는 받침:

<Stack direction="row" justifyContent="end">
  <Button variant="contained">Item 1</Button>
</Stack>

그리드 컴포넌트를 사용하지 않으려면 CSS에 의존해야 합니다.

단, Material-UI를 사용하는 경우 일반 CSS가 아닌 JSS(CSS-IN-JS)를 사용해야 합니다.

• 개요 : https://material-ui.com/customization/css-in-js/
• 이점 : http://cssinjs.org/benefits

예를 들어 CSS에서는 이러한 솔루션 중 하나를 사용할 수 있습니다.문자 정렬이 가장 간단합니다.

• text-align: right
• float: right
• 플렉스 박스
  • 다음을 가진 부모:display: flex
  • 다음 조건을 가진 아이:align-content: flex-end

유연성이 있는 박스 컴포넌트를 사용합니다.

<Box display="flex" flexDirection="column" >
  <... other stuff/>
</Box>

자세한 내용은 이쪽

            <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
                <Typography sx={{ fontWeight: 600 }}>
                    Recent Repositories
                </Typography>
                <Box>
                    {/* <Typography></Typography> */}
                    <Button error>+ New</Button>
                </Box>
            </Toolbar>

최신 material-ui 버전 5의 경우 css text-align 및 flex-end=right와 동등한 justiceContent="flex-end" 또는 alignContent를 사용하십시오.

    <Grid container alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item justifyContent="flex-end">
         <Button>Example</Button>
    </Grid>

기존 재료-ui 버전 4의 경우

    <Grid item justify="flex-end">
         <Button>Example</Button>
    </Grid>

Material UI의 그리드 구성 요소에는 이를 위한 도우미 소품이 있습니다.

<Grid align-items-xs-center justify-xs-flex-end>
 <Button>Click me</Button>
</Grid>

문서는 여기서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/45159071/mui-how-to-align-a-component-to-the-center-right