I'm trying to get my Material design to work here in the CodeSandbox.
My problem is that I try to make it center horizontally.
Now it looks like this:
I made the top Container have color like backgroundColor: "#cfe8ac" (light green) to make it easier to see where it is. As you see it refuses to be center I have tried like alignItems="center" justify="center" but no luck I don't understand where to set the style
update
It's fixed now Thanks to @yun_jay
This is actually not caused by Material-Ui but by reactstrap. You have to use the offset of the column in order to center the columns.
To achieve this you have to add the following to your columns in your Layout component: xs={{ size: 6, offset: 3 }}.
Your code would then look like this:
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>
);
For further information see the documentation: https://reactstrap.github.io/components/layout/
