Setting container width on material-ui for React.js

Viewed 1831

I have recently started with React.js along with material-ui library. I am aware of the Grid system for layouts that material-ui uses. However, unlike Bootstrap, the container extends from end to end. Say, I want to create a global container to hold content which should have a max width of 1140px, what is the correct way to do it? Currently I am using withStyles provided by material-ui as shown by the code sample below

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  contentBody: {
    maxWidth: '1140px',
    marginLeft: 'auto',
    marginRight: 'auto'
  }
};

class ContentBody extends Component {
  render() {
    return (
      <Grid container className={this.props.classes.contentBody}>
        {this.props.children}
      </Grid>
    );
  }
}

export default withStyles(styles)(ContentBody);
0 Answers
Related