React Material UI - Bootstrap Container Equivalent

Question

Is theme a component in React Material UI which behaves like Bootstrap's <div class="container"> ?

I want it to have breakpoints (or at least a reasonable max-width ).

I'm pretty sure it doesn't matter, but I want to use it with an AppBar and a Drawer .

Answer 1

This is the css for bootstrap container. You can create one yourself and use it.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

referenced from https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Answer 2

I personally have this implementation:

import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    container: {
        paddingRight: 15,
        paddingLeft: 15,
        marginRight: 'auto',
        marginLeft: 'auto',

        // Full width for (xs, extra-small: 0px or larger) and (sm, small: 600px or larger)
        [theme.breakpoints.up('md')]: {  // medium: 960px or larger
            width: 920,
        },
        [theme.breakpoints.up('lg')]: {  // large: 1280px or larger
            width: 1170,
        },
        [theme.breakpoints.up('xl')]: {  // extra-large: 1920px or larger
            width: 1366,
        },
    },
});

const MyContainer = () => (
    <div className={styles.container}>
        {/* Other stuff here */}
    </div>
);

export default withStyles(styles)(MyContainer);

You can change width for each breakpoint according to your wish.