Sombras
Adicione ou remova sombras dos elementos usando os utilitários box-shadow.
Exemplo
Os utilitários permitem que você controle a profundidade ou distância relativa entre duas superfícies ao longo do eixo z. By default, there are 25 elevation levels.
boxShadow: 0
boxShadow: 1
boxShadow: 2
boxShadow: 3
<Box sx={{ boxShadow: 0 }}>…
<Box sx={{ boxShadow: 1 }}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 3 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
API
import { shadows } from '@material-ui/system';
| Nome da importação | Propriedade | Propriedade CSS | Chave do tema |
|---|---|---|---|
boxShadow |
boxShadow |
box-shadow |
shadows |