Estoy siguiendo su documentación desde aquí para modificar las propiedades predeterminadas del componente Paper.
Aquí está mi código.
import { styled } from '@mui/material/styles'; import { Modal, Button, TextField, Grid, Paper } from '@mui/material'; const Item:any = styled(Paper)(({theme}) => ({ // ...theme.typography.body2, root: { boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)', }, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)', '& .MuiPaper-root': { boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)', } })); const MyComponent = (props: any) => { return ( <Grid container> <Grid item xs={8}> <Item elevation={1} square variant="outlined">xs=8</Item> </Grid> </Grid> ) }¿Qué estoy haciendo mal aquí?
Debe cambiar el valor de boxShadow, el valor actual es blanco y tiene pañales, cambie a negro como se muestra a continuación. Pruebe este código, probé, funcionó para mí:
const Item = styled(Paper)(({theme}) => ({ padding: theme.spacing(1), textAlign: 'center', color: '#000', backgroundColor: 'pink', boxShadow:'3px 3px 5px 3px rgb(0 0 0 ,0.2)' }));