如何禁用阴影或更改 Material-UI 所需的组件

Question

我想使用 Material UI 的<AppBar>组件。 但是，它会产生阴影。 我搜索了一些解决方案并遇到了更改使用createMuiTheme, MuiThemeProvider并将默认阴影设置为

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

通过这样做，它会从我使用的每个元素中删除阴影。但是，我想为按钮和其他组件使用阴影..

那么，如何仅更改组件的阴影属性？

Answer 1

如果组件具有适当的道具，您可以在传递给 createMuiTheme 的对象中使用“道具”属性。 例如，如果我想从我的应用程序中的所有按钮中删除框阴影（“高度”），我可以使用以下代码：

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
    props: {
      MuiButton: {
        disableElevation: true
     }
    }
});

// more code...
return <ThemeProvider theme={theme}>{children}</ThemeProvider>

请参阅 Material UI 文档中的“默认道具”部分： https : //material-ui.com/customization/globals/

这是通过将该道具添加为所有按钮的默认选项来实现的。 好消息是，如果你偶尔想添加一个属性，你可以将它添加到组件本身：

// add box-shadow to this one button
<Button elevation={5}>Hooray, Box Shadow!</Button>

如果组件没有采用相关的道具，那么您可以使用覆盖：

const theme = createMuiTheme = ({
    overrides: {
      MuiButtonGroup: {
        // the contained class has the box-shadow css
        contained: {
          boxShadow: 'none'
        }
      }
    }
})

不幸的是，Material UI 规范无处不在，因此对一个组件有效的内容不一定适用于下一个！

Answer 2

您需要在主题中使用override并指定组件。 在您的情况下，您需要使用MuiAppBar ，这意味着它下的属性只会影响AppBar组件。 这是一个例子。

const theme = createMuiTheme({
  overrides: {
    MuiAppBar: {
      boxShadow: 'none'
    }
  }
});