I would like to add a shadow to a <Grid container> component.
I see in the documentation here. I should just use something like boxShadow={1} and import import { shadows } from '@material-ui/system';.
I've done this, but am not getting any results.
Would anyone know the correct way to add shadows to a component?
Since <Grid /> doesn't have the props boxShadow,
Use <Box /> with its component as Grid would be fine.
<Box
component={Grid}
container
boxShadow={3}
>
<Box ... />
<Box ... />
...
</Box>
Refer:
MUI Box props API
MUI Grid props API
Demo and source:
<Box
component={Grid}
container
boxShadow={3}
spacing={3}
style={{ padding: 10 }}
>
<Box component={Grid} item boxShadow={0} xs={3}>
boxShadow={0}
</Box>
<Box component={Grid} item boxShadow={1} xs={3}>
boxShadow={1}
</Box>
<Box component={Grid} item boxShadow={2} xs={3}>
boxShadow={2}
</Box>
<Box component={Grid} item boxShadow={3} xs={3}>
boxShadow={3}
</Box>
</Box>
In MUI v5, all MUI components have sx support now. You can add a boxShadow value directly without having to import the shadows array:
<Stack direction="row" gap={2}>
<Box sx={{ boxShadow: 10, width: 30, height: 30 }} />
<Button sx={{ boxShadow: 10 }}>button</Button>
<Chip sx={{ boxShadow: 10 }} label="chip" />
<CircularProgress sx={{ boxShadow: 10, borderRadius: 50 }} />
</Stack>
Many sx properties are theme aware, including boxShadow. The code below:
sx={{ boxShadow: 10 }}
Is the same as:
sx={{ boxShadow: theme => theme.shadows[10] }}
