material-ui 앱바를 material-ui-next와 함께 사용하여 오른쪽 또는 왼쪽으로 이동하는 올바른 방법은 무엇입니까?

material-ui 앱바를 material-ui-next와 함께 사용하여 오른쪽 또는 왼쪽으로 이동하는 올바른 방법은 무엇입니까?

material-ui-next ("material-ui": "^1.0.0-beta.22,")를 사용하는 동안 로그인/로그아웃 버튼이 바로 뜨도록 하는 올바른 방법을 사용하고 있는지 알 수 없습니다.

제거된 것 같습니다.iconElementRight=api에서.를 사용할 필요가 있습니까?<Grid>이제 앱바에?뭔가 탁한 느낌이 들어요.앱바에 버튼(로그인 등)을 띄우는 올바른 방법은 무엇입니까?

<AppBar position="static">
      <Toolbar>
        <Grid container spacing={24}>
          <Grid item xs={11}>
            <Typography type="title" color="inherit">
              Title
            </Typography>
          </Grid>

          <Grid item xs={1}>
            <div>
              <HeartIcon />
              <Button raised color="accent">
                Login
              </Button>
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>

@Kyle 네 말이 맞아:)

그리드 컨테이너에 추가하기만 하면 됩니다.

정당화="공백"

예를 들어 다음과 같습니다.

<AppBar position="static">
  <Toolbar>
    <Grid
      justify="space-between" // Add it here :)
      container 
      spacing={24}
    >
      <Grid item>
        <Typography type="title" color="inherit">
          Title
        </Typography>
      </Grid>

      <Grid item>
        <div>
          <HeartIcon />
          <Button raised color="accent">
            Login
          </Button>
        </div>
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>

를 추가해야 합니다.flex: 1고객님께<Typography />컴포넌트를 사용하여<div />AppBar의 맨 오른쪽 부분:

<AppBar position="static">
  <Toolbar>
    <Typography type="title" color="inherit" style={{ flex: 1 }}>
      Title
    </Typography>
    <div>
      <HeartIcon />
      <Button raised color="accent">
        Login
      </Button>
    </div>
  </Toolbar>
</AppBar>

<Toolbar>
  <Box sx={{ flexGrow: 1 }}>
    <Button variant='text' color='inherit'>Button1</Button>
    <Button variant='text' color='inherit'>Button2</Button>
    <Button variant='text' color='inherit'>Button3</Button>
  </Box>
  <Button variant='text' color='inherit'>Button4</Button>
</Toolbar>

지금이다Button4오른쪽 끝에 배치됩니다!

여기에 표시된 대로 "align="right" 속성을 사용하십시오. https://mui.com/api/typography/

새로운 종류:

<Grid
  container
  direction="row"
  justifyContent="space-between"
  alignItems="center"
>
    <Grid item>Back</Grid>
    <Grid item>Next</Grid>
</Grid>

언급URL : https://stackoverflow.com/questions/47686456/whats-the-right-way-to-float-right-or-left-using-the-material-ui-appbar-with-ma