54

I need to disable the default box-shadow for most Material UI components. Right now I'm doing this by setting the style manually for each component, like this:

<FloatingActionButton style={{boxShadow: "none"}} />

Is there a way to do this globally, maybe using a theme setting?

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Matt Zukowski
  • 4,469
  • 4
  • 37
  • 38

10 Answers10

99

You can do it by component like this: 

<AppBar elevation={0} />
Gus
  • 6,545
  • 4
  • 36
  • 39
  • 1
    It does work, is it documented somewhere? How did you find out? – apt Oct 16 '19 at 00:55
  • I think it was a guess, cause elevation applies shadows. Plus if you travel through the component typescript definitions you'll see how its props work. – Gus Oct 17 '19 at 14:56
  • 4
    It is documented at the site. the Appbar is written above the Paper component. From the [documentation](https://material-ui.com/api/app-bar/#appbar-api) `The props of the Paper component are also available.` – Nn Karthik Dec 20 '19 at 17:01
34

In the configuration object of a material-ui theme, you can see the shadows property, override it in your code and just leave the none value, remove all the rest.

You code should look like this:

const theme = createMuiTheme({
  shadows: ["none"]
});

All the shadow box will be removed entirely in your application.

P/s: This configuration is for version 1.0.0-beta.8, I must note it here because this version has some breaking changes.

JMA
  • 1,781
  • 9
  • 18
thelonglqd
  • 1,805
  • 16
  • 28
  • Hi, I'm using your solution here https://stackoverflow.com/questions/50516398/material-ui-the-shadows-array-provided-to-createmuitheme-should-support-25-elev however getting an error message :( – Leon Gaban May 24 '18 at 18:59
  • 2
    I got rid of the error message by doing `shadows: new Array(25)` – Almaju Jan 25 '19 at 17:21
16

I use the following for TypeScript:

import { createMuiTheme } from "@material-ui/core/styles"
import { Shadows } from "@material-ui/core/styles/shadows"

const theme = createMuiTheme({
  shadows: Array(25).fill("none") as Shadows,
})
sunknudsen
  • 6,356
  • 3
  • 39
  • 76
9

Material UI v5 update.

To disable the shadow globally, you need to reset all shadow values in the shadows array to none:

import { createTheme, ThemeOptions, Shadows } from '@mui/material/styles';

// create a temporary theme to get the default options
const defaultTheme = createTheme();

// get the default `shadows` object
const defaultShadows: ThemeOptions['shadows'] = [...defaultTheme.shadows];

// disable shadows
const theme = createTheme({
  shadows: defaultShadows.map(() => 'none') as Shadows,
});

Codesandbox Demo

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • why map? When you can do Array.fill – Rajendran Nadar Dec 08 '21 at 19:31
  • 2
    In case MUI changes the number of shadow in the future. If you're using `fill`, you can do the same with `Array(shadows.length).fill("none")`. @RajendranNadar – NearHuscarl Dec 08 '21 at 19:32
  • As far as I know, there won't be a breaking change in minor or patch releases so it is safe. – Rajendran Nadar Dec 08 '21 at 19:36
  • @NearHuscarl I edited your original answer because of an issue with the "import" line. On MUI, anything more than a 4-level import is considered private ([Marija Najdova's answer on GitHub](https://github.com/mui/material-ui/issues/33420#issuecomment-1181433100)). Feel free to revert the changes if you dislike them, although be aware that the original answer gives an `Unexpected token 'export'` exception depending on the bundler. – Daniel Loureiro Feb 28 '23 at 12:41
3

Just set the zDepthShadows to 'none' in the theme, either by creating a custom theme, or overriding them when you import the theme.

Matt
  • 3,682
  • 1
  • 21
  • 27
2

Use<FloatingActionButton style={{boxShadow: "none"}} elevation={0} /> Worked for me. I actually applied it to Menu as shown below.

<Menu
    id="indMenu"
    onClose={handleIndustryMenuClose}
    anchorEl={anchorEL}
    open={Boolean(anchorEL)}
    className={classes.ndmenu}
    elevation={0}
    style={{
      marginTop: "3.5em",
      // boxShadow:"none"
    }}
  >
Horitty TechMasters
  • 129
  • 1
  • 5
0

Edit: This solution throws errors like "MUI: The elevation provided is not available in the theme. Please make sure that theme.shadows[24] is defined." So probably not the best option out there.

In your custom theme object, set shadows: "none":

import { createTheme } from "@mui/material/styles";
    
const theme = createTheme({
  shadows: "none"
});
Bar Amir
  • 56
  • 6
0

You can apply Global style overrides using with createTheme function

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps:{
        disableElevation: true
      }
    },
    overwrite other components...
  }
})
Wai Yan Min Aung
  • 1
0

Just simply add shadows="none", You can also consider shadow for 1 theme and no shadow for other theme.

const lightTheme = createTheme({
   palette: {
      mode: "light",
      pallete:{
      ...
      },
   },
   shadows:"none",
})

const darkTheme= createTheme({
   palette: {
      mode: "dark",
      pallete:{
      ...
      },
   },
})

And Then in ThemeProvider

 <ThemeProvider theme={darkModeActive ? darkTheme : lightTheme}>
     <App/>
 </ThemeProvider>

(Works Fine In Nextjs also!)

Far Sal
  • 1
  • 1
-1

Nice! add elevation={0} to success. =)

Mizael Duarte
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 02 '22 at 22:20