如何去除 MUI 中所有按钮的阴影

Question

我想删除自定义 MUI 主题中所有包含按钮的阴影，但到目前为止我不知道如何操作。我该怎么做？我尝试将每个按钮的 boxShadow 属性设置为零，但这不起作用。

Answer 1

您可以使用Button名为的道具disableElevation（false默认情况下）

您可以在每个组件中使用它或在主题设置中全局设置

在单个组件中

<Button variant="contained" disableElevation={true}>
  a button
</Button>

通过主题设置全局

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: {
        disableElevation: true
      }
    }
  }
});

Codesandbox 演示