如何使用 MUI v5 居中对齐一个项目并右对齐另一个项目？答案

【问题标题】：How to center align one item and right align another using MUI v5?如何使用 MUI v5 居中对齐一个项目并右对齐另一个项目？
【发布时间】：2022-08-14 19:26:04
【问题描述】：

我想在我的页面中间居中 3 个导航选项卡，并在最右侧有一个用于排序的下拉菜单。我能够得到最右边的下拉菜单，尽管无法弄清楚如何将 3 个导航选项卡完美地居中于 <Box> <Box/> 组件内。

这是我正在尝试做的事情的图片：

这是一个代码沙箱：https://codesandbox.io/s/45159071-how-to-align-a-component-to-the-center-right-forked-0y60s3?file=/demo.js

<Grid
    container
    sx={{ marginTop: 3, marginBottom: 3, alignItems: \'center\' }}
>
    <Box
        sx={{ marginRight: \'auto\' }}
    >
        <Tabs
            value={activeMenuTab}
            onChange={handleChangeTab}
        >
            <Tab label=\"Tab 1\" />
            <Tab label=\"Tab 2\" />
            <Tab label=\"Tab 3\" />
        </Tabs>
    </Box>
    <Grid
        item
        xs
        style={{ flexGrow: 0 }}
    >
        <FormControl
            sx={{ minWidth: 150 }}
            size=\"small\"
        >
            <InputLabel id=\"sort-by\">Sort By</InputLabel>
            <Select
                labelId=\"sort-by\"
                value={selectedValue}
                label=\"Sort By\"
                onChange={handleSorting}
            >
                <MenuItem value=\"oldest\">Oldest</MenuItem>
            </Select>
        </FormControl>
    </Grid>
</Grid>

我发现了一篇类似的帖子，它使用了纯 CSS，尽管很难将它集成到 MUI 组件中：Center one and right/left align other flexbox element

标签： css reactjs flexbox material-ui

【解决方案1】：

试试这个解决方案，我只使用了盒子组件而不是网格就像您在网格中指出的那样复制。

<Box
  display="grid"
  gridTemplateColumns="repeat(12, 1fr)"
  sx={{ marginBlock: 3, alignItems: 'center' }}
>
  <Box gridColumn="3 / 11">
    <Tabs centered value={'null'} onChange={handleChangeTab}>
      <Tab label="Tab 1" />
      <Tab label="Tab 2" />
      <Tab label="Tab 3" />
    </Tabs>
  </Box>
  <Box gridColumn="11 / -1" sx={{ justifySelf: 'end' }}>
    <FormControl sx={{ minWidth: 150 }} size="small">
      <InputLabel id="sort-by">Sort By</InputLabel>
      <Select labelId="sort-by" value="Some Value" label="Sort By" onChange={handleSorting}>
        <MenuItem value="oldest">Oldest</MenuItem>
        <MenuItem value="newest">Newest</MenuItem>
      </Select>
    </FormControl>
  </Box>
</Box>

【讨论】：