如何禁用陰影或更改 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'
    }
  }
});