I am following their documentation from Here to modify default Paper component properties.
Here is my code.
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>
)
}
What am I doing wrong here?
You should change the value of boxShadow, current value is white and is diapered, change to black like below. Try this code, I tested, worked for me:
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)'
}));