React Material 组件拒绝在代码沙箱中水平居中

Question

我正在尝试让我的 Material 设计在 CodeSandbox 中发挥作用。

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

现在看起来像这样：

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

更新

现在已修复感谢@yun_jay

Answer 1

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

为此，您必须将以下内容添加到布局组件的列中：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/

React Material 组件拒绝在代码沙箱中水平居中

React Material Component refuse to be horizontally center here in Code Sandbox

javascript

components

center

reactjs

material-ui

现场演示