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

Posted 2023-02-22

【中文标题】如何为所有 MUI 组件全局禁用 box-shadow？

【英文标题】：How to disable box-shadow globally for all MUI components?

【发布时间】：2016-04-05 16:07:12

【问题描述】：

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

<FloatingActionButton style=boxShadow: "none" />

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

【参考方案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版本的，我必须在这里说明，因为这个版本有一些重大的变化。

【讨论】：

嗨，我在这里使用您的解决方案***.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

据我所知，次要版本或补丁版本不会有重大更改，因此是安全的。