reactjs - 在 Material-ui 中为网格项指定 "justify"的最佳方法是什么？

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);