reactjs - 观察 minWidth 的工具栏容器

Question

我是反应和材料 UI 的新手，我一直在尝试设计我的导航栏，以便我的徽标、搜索栏和抽屉位于中心。我能够更早地获得帮助以获得组件之间的空间并使搜索栏居中，但现在我正在努力让我的徽标和抽屉位于中心，同时观察我的搜索栏的最小宽度。

我已经尝试将它们包装到具有指定宽度的容器中，但它们在中心失去了对齐。

这是我的代码：

const Search = styled('div')(({ theme }) => ({
  position: 'relative',
  borderRadius: 30,
  backgroundColor: alpha(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: alpha(theme.palette.common.white, 0.25),
  },
  // marginLeft: 10,
 width: 'auto'
}));

const SearchIconWrapper = styled('div')(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: 'inherit',
  '& .MuiInputBase-input': {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    width: 'auto',

  },
}));

export default function SearchAppBar({ search, setSearch }) {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="fixed" sx={{ backgroundColor: "#55597d" }}>
        <Toolbar sx={{ justifyContent: "space-between" }}>
          <Stack direction="row" alignItems="center">
            <img
              style={{ marginRight: "10px" }}
              src={logo}
              alt="logo"
              className="logotext"
              width="38"
              height="38"
            />
          </Stack>
          <Search>
            <SearchIconWrapper>
              <SearchIcon />
            </SearchIconWrapper>
            <StyledInputBase
              sx={{ width: "auto" }}
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
              }}
              placeholder="Search All Games…&quot;
              inputProps={{ "aria-label": "search" }}
            />
          </Search>
          {/*</div>*/}
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="open drawer"
            sx={{ mr: 0, ml: 0 }}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

标签： reactjsmaterial-ui