在material-ui中为网格项指定“对齐”的最佳方法是什么？

Question

我有一个来自material-UI 库的简单网格。看起来是这样的：

<Grid container>
    <Grid item sm={6}>
        <SearchPanel/>
    </Grid>
    <Grid item sm={6}>
        <ItemStatusFilter/>
    </Grid>
</Grid>

我只是不明白如何将第一个网格项目对齐在中心，而第二个，例如，在右侧？

UPD：我可以在 CSS 文件中使用 justify-content: flex-end!important，但我不确定这是不是最好的方法。

Answer 1

下面是对 Material-UI v3 和 v4 执行此操作的一种方法（v5 示例进一步向下）。

import React from "react";
import ReactDOM from "react-dom";

import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <Grid container>
      <Grid item xs={4}>
        {/* Intentionally Empty */}
      </Grid>
      <Grid container item xs={4} justify="center">
        <div>Search Panel</div>
      </Grid>
      <Grid container item xs={4} justify="flex-end">
        <div>Item Status Filter</div>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是邓肯评论的大致思路。我已将sm 更改为xs，这样我就可以在任何尺寸的屏幕上验证行为。最后，Material-UI 的Grid 只是在CSS Flexbox model 周围增加了一些便利，所以要知道如何使用Grid，您需要了解如何在CSS 中进行操作。 Grid 添加的主要内容是针对不同屏幕尺寸以不同方式控制 12 列网格的简单响应方面。

这是 v5 的等效示例（justify 属性重命名为 justifyContent）：

import React from "react";
import ReactDOM from "react-dom";

import Grid from "@mui/material/Grid";

function App() {
  return (
    <Grid container>
      <Grid item xs={4}>
        {/* Intentionally Empty */}
      </Grid>
      <Grid container item xs={4} justifyContent="center">
        <div>Search Panel</div>
      </Grid>
      <Grid container item xs={4} justifyContent="flex-end">
        <div>Item Status Filter</div>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);