We used core shadows as provided by MUI. Refer:
There are few shadows that we customized as per theme's need. check here: src\themes\shadows.tsx
.
import {useTheme} from '@mui/material/style';
function YourComponent() {
const theme = useTheme();
return (
<>
...
...
// normal shadow
<Box sx={{ boxShadow: theme.customShadows.z1 }}>....</Box>
// shadows according to palette
<Box sx={{ boxShadow: theme.customShadows.primary }}>....</Box>
...
...
</>
)
}