How to set breakpoints in Material ui grid to make it responsive - css

Question

I am using Material ui Grid to arrange my ui elements. Below is my code
<Grid container spacing={3}>
<Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRight: '1%' }}>
<Grid item xs={7} sm={7} md={7}>
<label className={classes.title}> Title </label>
</Grid>
<Grid item xs={5} sm={5} md={5}>
<label style = {{marginLeft: '25%'}}> Lable 1 </label>
<label> Lable 2 </label>
</Grid>
</Grid>
Now, as per the above code, i want to make design responsive based on screen sizes and add breakpoints, how can i achieve it? Also, is there any way to handle the browser resolution/zoom, my design goes to horizontal scroll with bigger zoom.

Answer 1

To make this work import
import {createMuiTheme,ThemeProvider} from "#material-ui/core/styles"
As stated above you use the following code to set your breakpoints. You are not limited to the pre defined names you can use any name you want. The values are the min-width for the breaking point. So in this case XS stops at 449px.
const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
sm: 450,
md: 600,
lg: 900,
xl: 1200,
tablet:1024
}
}
});
You then have to use a theme provider to implement it.
<ThemeProvider theme={theme}>
<Grid container><Grid item xs={12}>Some stuff</Grid></Grid>
</ThemeProvider>

Answer 2

The Grid is already responsive.
Setting md to be below 12 to set breakpoints for lager screens.
For even larger screens use lg and xl.
It will respect browser resolution/zoom and will automatically put components in a new line, if the screen size is below the given break point.
To add custom break points, you can add these options to create mui theme:
const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
sm: 450,
md: 600,
lg: 900,
xl: 1200
}
}
});