How do I use MUI's shadows?

Question

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?

Answer 1

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] }}

Answer 2

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>