44

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

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

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

4

7 回答 7

87

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

<AppBar elevation={0} />
于 2019-08-06T20:41:24.893 回答
30

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

您的代码应如下所示：

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

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

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

于 2017-09-09T04:50:43.127 回答
12

我将以下内容用于 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,
})
于 2020-06-08T12:33:59.640 回答
3

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

于 2016-05-31T20:09:27.187 回答
2

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

Codesandbox 演示

于 2021-11-02T03:56:14.147 回答
1

使用<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"
    }}
  >
于 2021-07-02T11:39:35.147 回答
0

好的！添加海拔={0} 成功。=)

于 2022-03-02T17:07:12.437 回答