MaterialUI：如何在轴的 x 轴端对齐按钮？

Question

I have a navbar component that looks like

<AppBar position="static" color="inherit">
<Toolbar className={classes.toolbar}>
  <IconButton edge="start" color="inherit" aria-label="menu" onClick={toggleDrawer(true)}>
    <MenuIcon />
  </IconButton>

  <Link href="#" color="primary" underline="none" variant="h5" className={classes.brand}>
    {brand}
  </Link>
  <Button variant="contained" color="secondary" className={classes.primaryAction}>{content['primary-action']}</Button>
</Toolbar>

However the <Button variant="contained> is placed before the Link, how can I place the button all the way to the end of the x axis?

This is the styles

const useStyles = makeStyles((theme: Theme) => ({
  toolbar: {
    minHeight: 200
  },
  brand: {
    lineHeight: 1,
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)'
  },
  primaryAction: {
    justifySelf: 'end'
  },
  iconWrapper: {
    minWidth: 40,
  },

 
}));

Answer 1

Try to apply flexGrow: 1 on the link and align it right:

<AppBar position="static" color="inherit">
<Toolbar className={classes.toolbar}>
  <IconButton edge="start" color="inherit" aria-label="menu" onClick={toggleDrawer(true)}>
    <MenuIcon />
  </IconButton>

  <Link href="#" color="primary" underline="none" variant="h5" sx={{ flexGrow: 1, textAlign: 'right' }}>
    {brand}
  </Link>
  <Button variant="contained" color="secondary" className={classes.primaryAction}>{content['primary-action']}</Button>
</Toolbar>

Answer 2

Try using CSS flex to place the buttons and link inside the toolbar.

Here's a working CodeSandbox. (Note that if you want the Link to come after the Button, just move the component below the Button in the code as per the comment I left).

Here's the JSX:

<AppBar position="static" color="inherit">
      <Toolbar className={classes.toolbar}>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="menu"
          onClick={toggleDrawer(true)}
        >
          <MenuIcon />
        </IconButton>

        <div className={classes.verticalCenter}>
          {/* Just move this link to come after the Button below to change the order */}
          <Link
            href="#"
            color="primary"
            underline="none"
            variant="h5"
            className={classes.brand}
          >
            {brand}
          </Link>

          <Button
            variant="contained"
            color="secondary"
            className={classes.primaryAction}
          >
            {content["primary-action"]}
          </Button>
        </div>
      </Toolbar>
    </AppBar>

And the CSS:

const useStyles = makeStyles((theme) => ({
  toolbar: {
    minHeight: 200,
    display: "flex",
    justifyContent: "space-between"
  },
  brand: {
    lineHeight: 1,
    padding: 16
  },
  primaryAction: {
    justifySelf: "flex-end"
  },
  iconWrapper: {
    minWidth: 40
  },
  verticalCenter: {
    display: "flex",
    alignItems: "center"
  }
}));