Material UI - Box Breakpoints

Quick and Easy

Box is a very useful component. You can add breakpoints to show / hide certain elements like this:

import Box from '@material-ui/core/Box';

<Box flexGrow={1} display={{ xs: 'none', sm: 'block' }}>
  <Typography variant="h6">Material UI Workshop</Typography>
</Box>

So on small mobile screens out title will not show since it will take up too much space. However on small and above it will show as a block element.