How do I remove the shadows for all Buttons in MUI

Viewed 25

I want to remove the shadows for all contained buttons in my custom MUI theme but I don't know how to go about it so far. How do I do so? I have tried setting the boxShadow property for each individual Button to Zero but that's not working.

1 Answers

You could use a Button prop named disableElevation (which is false by default)

You could use it per component or set globally in theme setting

In a single component

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

Globally via theme setting

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

Codesandbox demo

Edit gracious-hermann-0lvvlj

Related