Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable box-shadow globally for all MUI components?

I need to disable the default box-shadow for most MUI components. Right now I'm doing this by setting the style manually for each component, like this:

<FloatingActionButton style={{boxShadow: "none"}} /> 

Is there a way to do this globally, maybe using a theme setting?

like image 217
Matt Zukowski Avatar asked Dec 31 '15 18:12

Matt Zukowski


People also ask

How to remove box shadow in MUI?

By default, when we use AppBar component from Material UI, there is a thick box-shadow. We can control the box-shadow using elevation attribute. Setting the value of elevation to 0 removes the box shadow.

How do I remove elevation from material UI AppBar?

You can remove the elevation from Material UI's AppBar by setting the elevation prop to 0.

What is MUI box?

The Box component serves as a wrapper component for most of the CSS utility needs. The Box component packages all the style functions that are exposed in @mui/system .


1 Answers

You can do it by component like this:

<AppBar elevation={0} /> 
like image 118
Gus Avatar answered Sep 20 '22 11:09

Gus