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

Question

我想用<AppBar> Material UI 的组件。但是，它会产生阴影。我搜索了一些解决方案并遇到了改变使用createMuiTheme, MuiThemeProvider并将默认阴影设置为
const theme = createMuiTheme({
shadows: ["none"]
});
通过这样做，它会从我使用的每个元素中删除阴影。但是，我想为按钮和其他组件使用阴影..

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

Answer 1

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

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 文档中的“默认 Prop ”部分: https://material-ui.com/customization/globals/

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

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

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

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

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