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

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>