javascript - React Material Component 拒绝在代码沙箱中水平居中

Question

我正在尝试让我的 Material 设计在CodeSandbox中工作。

我的问题是我试图让它水平居中。

现在看起来像这样：

我让顶部Container有颜色backgroundColor: "#cfe8ac"（浅绿色），以便更容易看到它的位置。如您所见，它拒绝成为我尝试过的中心，alignItems="center" justify="center"但没有运气，我不明白在哪里设置样式

更新

现在已修复感谢@yun_jay

标签： javascriptreactjsmaterial-uicomponentscenter

Answer 1

这实际上不是由 Material-Ui 引起的，而是由 reactstrap 引起的。您必须使用列的偏移量才能使列居中。

为此，您必须在 Layout 组件中的列中添加以下内容：xs={{ size: 6, offset: 3 }}. 您的代码将如下所示：

import React from "react";
import { Container, Row, Col } from "reactstrap";
import "../../node_modules/primereact/resources/primereact.css";
import "../../node_modules/primereact/resources/themes/nova-dark/theme.css";
import NavMenu from "./NavMenu";
import { Grid } from "@material-ui/core";

export default (props) => (
  <div>
    <NavMenu />
    <Container>
      <Row>
        <Col xs={{ size: 6, offset: 3 }}>{props.children[0]}</Col>
        <Col xs={{ size: 6, offset: 3 }}>{props.children[1]}</Col>
      </Row>
      <Row>
        <Col xs={{ size: 6, offset: 3 }}>{props.children[2]}</Col>
      </Row>
    </Container>
  </div>
);

有关更多信息，请参阅文档：https ://reactstrap.github.io/components/layout/

现场演示