如何使用 MUI 拉伸边距

Question

目前正在用MaterialUI搭建导航栏，现状如下图

我主要使用 MUI 文档中的模板，我想将按钮放在导航栏的右端。对于 CSS，我通常将 margin-right: auto 添加到徽标中，这样它会将按钮推向右侧，但 sx={{mr: 'auto'}} 似乎在 MUI 中的工作方式有所不同。 sx={{mr: 'auto'}} 不是最大化其边距，而是使边距为零。
那么如何使用 MUI 将按钮推到导航栏的右端？
我的 Navbar.js:

import * as React from 'react'
import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import Toolbar from '@mui/material/Toolbar'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import Menu from '@mui/material/Menu'
import MenuIcon from '@mui/icons-material/Menu'
import Container from '@mui/material/Container'
import Button from '@mui/material/Button'
import Tooltip from '@mui/material/Tooltip'
import MenuItem from '@mui/material/MenuItem'
import { Link } from 'react-router-dom'
import useScrollTrigger from '@mui/material/useScrollTrigger'
import Logo from '../images/site-logo.png'

const pages = ['Login', 'Register']


export default function NavBar()  {
  const [anchorElNav, setAnchorElNav] = React.useState(null)

  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  }

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  }

  return (
    <AppBar position="static">
      <Container maxWidth="xl" sx={{backgroundColor: 'white', py: 2}}>
        <Toolbar disableGutters>
          <Box
            component="img"
            sx={{ 
              display: { xs: 'none', md: 'flex' }, 
              mr: 2,
              ml: 5,
              height: 40
            }}
            src={Logo}
          />
          <Typography
            variant="h6"
            noWrap
            component="a"
            href="/"
            sx={{
              mr: 2,
              display: { xs: 'none', md: 'flex' },
              fontFamily: 'monospace',
              fontWeight: 700,
              letterSpacing: '.3rem',
              color: '#343434',
              textDecoration: 'none',
            }}
          >
            LOGO
          </Typography>

          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
            <IconButton
              size="large"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleOpenNavMenu}
              sx={{color: '#343434'}}
            >
              <MenuIcon />
            </IconButton>
            <Menu
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              keepMounted
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left',
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{
                display: { xs: 'block', md: 'none' },
              }}
            >
              {pages.map((page) => (
                  <MenuItem key={page} onClick={handleCloseNavMenu}>
                    <Typography textAlign="center" component={Link} to={`/${page}`} sx={{color: "#343434", textDecoration: 'none'}}>
                      {page}
                    </Typography>
                  </MenuItem>
              ))}
            </Menu>
          </Box>

          <Box
            component="img"
            sx={{ 
              display: { xs: 'flex', md: 'none' }, 
              mr: 2,
              height: 40
            }}
            src={Logo}
          />
          <Typography
            variant="h5"
            noWrap
            component="a"
            href=""
            sx={{
              mr: 2,
              display: { xs: 'flex', md: 'none' },
              flexGrow: 1,
              fontFamily: 'monospace',
              fontWeight: 700,
              letterSpacing: '.3rem',
              color: '#343434',
              textDecoration: 'none',
            }}
          >
            LOGO
          </Typography>
          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
            <Button
              onClick={handleCloseNavMenu}
              variant="outlined"
              sx={{ my: 2, color: '#343434', display: 'block', mx: 1 }}
              component={Link}
              to={`/Login`}
            >
              Login
            </Button>  
            <Button
              onClick={handleCloseNavMenu}
              variant="contained"
              color="primary"
              sx={{ my: 2, color: 'white', display: 'block', mx: 1, right: 0 }}
              component={Link}
              to={`/Register`}
            >
              Register
            </Button>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  )
}

Answer 1

这是因为你在最后一个Box组件上设置了flexGrow: 1,，将其更改为flexGrow:0并在Typography上设置mr:"auto"徽标文字可以解决您的问题。

如何使用 MUI 拉伸边距

How to stretch the margin with MUI

javascript

reactjs

material-ui

navbar

margin