CODEWITHSUNDEEP
javascriptreactjsmaterial-uicomponentscenter
Kid
Kid

Reputation: 2205

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

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:

enter image description here

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

Upvotes: 2

Views: 102

Answers (1)

yun_jay
yun_jay

Reputation: 1180

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/

Live Demo

Edit AspNetCoreReactRedux (forked)

Upvotes: 3

Related Questions