Question

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

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

这样做可以消除我使用的每个元素的阴影。但是，我想为按钮和其他组件使用阴影。

所以，如何更改仅组件的阴影属性？

Answer 1

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

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

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

2 个答案: