I have incorporated material ui's Grid for responsive user interface design.
<Grid spacing={2} xs={12} container={true}>
<Grid item={true} lg={4} md={6} sm={12}>...</Grid>
<Grid item={true} lg={4} md={6} sm={12}>...</Grid>
<Grid item={true} lg={4} md={6} sm={12}>...</Grid>
</Grid>
In this specific instance, I wish to customize the screen width for the breakpoint md to a value of npx, without affecting other parts of the application.
I have found solutions for adjusting screen width globally across the app and also for individual grid instances using styles.
const styles = theme => ({
root: {
[theme.breakpoints.up('md')]: {
width: npx,
},
},
});
However, I would prefer to achieve this customization using CSS instead of material ui styles. How can I accomplish that?