如何为所有材料-ui React组件全局禁用盒子阴影？

Question

我需要为大多数material-ui组件禁用默认的box-shadows.现在我通过手动为每个组件设置样式来做到这一点,如下所示:

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

有没有办法在全球范围内这样做,也许使用主题设置？

Answer 1

您可以检查material-ui文档页面的URL:自定义css

在material-ui主题的配置对象中,您可以看到shadows属性,在代码中覆盖它,只需保留none值,删除所有其余部分.

您的代码应如下所示:

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

所有阴影框将在您的应用程序中完全删除.

P/s:此配置适用于版本1.0.0-beta.8,我必须在此处注意,因为此版本有一些重大更改.

Answer 2

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

Answer 3

材质 UI v5更新。

要全局禁用阴影，您需要将shadows数组中的所有阴影值重置为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,
});

Answer 4

您可以按以下方式通过组件进行操作：

<AppBar elevation={0} />

Answer 5

只需在主题中将 主题设置zDepthShadows为“无”，方法是创建自定义主题，或者在导入主题时覆盖它们。