Add or remove shadows to elements with box-shadow utilities.

Mui core shadows

We used core shadows as provided by MUI. Refer:

Customized customShadows

There are few shadows that we customized as per theme's need. check here: src\themes\shadows.tsx.


How to use

  1. Import MUI theme

  2. Use shadow with an element.

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>

Last updated