How to disable box-shadows globally for all material-ui React components?

问题

I need to disable the default box-shadows 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?

回答1:

You can do it by component like this:

<AppBar elevation={0} />

回答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.

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

回答4:

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

来源：https://stackoverflow.com/questions/34550593/how-to-disable-box-shadows-globally-for-all-material-ui-react-components