How to disable box-shadow globally for all MUI components?

Question

I need to disable the default box-shadow for most MUI 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?

Solution 1

You can do it by component like this:

<AppBar elevation={0} />

Solution 2

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.

Solution 3

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,
})

Solution 4

MUI v5 update.

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

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

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

Solution 5

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

View more solutions

Comments

[Leon Gaban]

Hi, I'm using your solution here stackoverflow.com/questions/50516398/… however getting an error message :(

[Almaju]

I got rid of the error message by doing shadows: new Array(25)

[apt]

It does work, is it documented somewhere? How did you find out?

[Gus]

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.

[Nn Karthik]

It is documented at the site. the Appbar is written above the Paper component. From the documentation The props of the Paper component are also available.

[Rajendran Nadar]

why map? When you can do Array.fill

[NearHuscarl]

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

[Rajendran Nadar]

As far as I know, there won't be a breaking change in minor or patch releases so it is safe.

[Ovi Trif]

I think the question was clearly about doing it globally.