如何为所有 MUI 组件全局禁用 box-shadow？答案

【问题标题】：How to disable box-shadow globally for all MUI components?如何为所有 MUI 组件全局禁用 box-shadow？
【发布时间】：2016-04-05 16:07:12
【问题描述】：

我需要禁用大多数 MUI 组件的默认 box-shadow。现在我通过为每个组件手动设置样式来做到这一点，如下所示：

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

有没有办法在全局范围内做到这一点，也许使用主题设置？

【问题讨论】：

标签： reactjs material-ui themes

【解决方案1】：

你可以通过这样的组件来做到这一点：

<AppBar elevation={0} />

【讨论】：

它确实有效，它是否记录在某处？你是怎么知道的？
我认为这是一个猜测，因为高程应用了阴影。另外，如果您浏览组件 typescript 定义，您会看到它的 props 是如何工作的。
它记录在网站上。 Appbar 写在 Paper 组件上方。来自documentationThe props of the Paper component are also available.

【解决方案2】：

在material-ui 主题的配置对象中，您可以看到shadows 属性，在您的代码中覆盖它并保留none 值，删除所有其他值。

您的代码应如下所示：

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

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

P/s：这个配置是针对1.0.0-beta.8版本的，我必须在这里说明，因为这个版本有一些重大的变化。

【讨论】：

嗨，我在这里使用您的解决方案stackoverflow.com/questions/50516398/… 但是收到错误消息:(
我通过shadows: new Array(25)摆脱了错误消息

【解决方案3】：

我将以下内容用于 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】：

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

【讨论】：

【解决方案5】：

使用<FloatingActionButton style={{boxShadow: "none"}} elevation={0} /> 为我工作。我实际上将它应用于菜单，如下所示。

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

【讨论】：

【解决方案6】：

MUI v5 更新。

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

【讨论】：

为什么是地图？什么时候可以做 Array.fill
万一 MUI 将来改变影子的数量。如果您使用fill，您可以对Array(shadows.length).fill("none") 执行相同的操作。 @RajendranNadar
据我所知，次要版本或补丁版本不会有重大更改，因此是安全的。