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

Question

I want to use <AppBar> component of Material UI. But, it generates shadows. I searched for some solution and came across to change use the createMuiTheme, MuiThemeProvider and set default shadow to

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

By doing this it removes shadows from every element I use.But , I want to use shadows for buttons and other components..

So, How can I change the shadow property of component only??

Answer 1

If the component has the appropriate props you can use the 'props' property in the object passed to createMuiTheme. For example, if I want to remove box shadows ("elevation") from all buttons in my app, I can use the following code:

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

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

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

See the 'Default Props' section in the Material UI docs: https://material-ui.com/customization/globals/

This works by adding that prop as a default option to all buttons. The nice thing is that if you occasionally want to add a property back, you can just add it to the component itself:

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

If the component doesn't take the relevant prop, then you can use the overrides:

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

Unfortunately the Material UI spec is all over the place, so what works for one component won't necessarily work for the next!

Answer 2

You need to use override within Theme and specify component as well. In your case you need to use MuiAppBar , which means that properties under it will effect only the AppBar component. Here is an example.

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