Question

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

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

有没有办法在全球范围内执行此操作，可能使用主题设置？

Answer 1

您可以查看material-ui文档页面的此URL：customize css

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

您的代码应如下所示：

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

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

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

Answer 2

您可以按如下所示的组件进行操作：

<AppBar elevation={0} />

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

Answer 4

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

Answer 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"
    }}
  >

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

5 个答案: