Blog

Using the Material UI App Bar The AppBar component from Material UI has a heavy box shadow by default. So sometimes time face an issue we have to remove that box shadow that comes under the App Bar.

As you can observe there is a by-default Thicker box shadow is coming at the bottom of the navbar or we can say AppBar.

We can use the elevation attribute to control the box shadow. The box shadow is eliminated when the elevation parameter is set to zero.

<AppBar elevation={0}>//...</AppBar>

Different box shadows according to different elevation values

If we Set the value elevation to 0 removes the box shadow. App bar will box like this. Where all the shadow at the bottom will remove.

<AppBar elevation={0}>//...</AppBar>

Now Let we Set the value elevation to 1 to remove the box shadow. The app bar will be like this. Where all the shadows at the bottom will be removed. The output will look like this. Similarly, we can change the values of elevation={0 to 4} and change the shadow of the appbar according to your requirements.

Version 2 :

<AppBar elevation={1}>//...</AppBar>

I hope you have clear idea about How to remove the Bottom shadow from the app bar from MUI or you have learn the concept to remove box shadow (box-shadow) from a material-ui AppBar.

<AppBar elevation={1}>//...</AppBar>
<AppBar elevation={2}>//...</AppBar>
<AppBar elevation={3}>//...</AppBar>
<AppBar elevation={4}>//...</AppBar>

Conclusion

That’s it congratulation you did it

I hope you enjoyed this article and successfully solved the issue which is How to remove box shadow (box-shadow) from a material UI AppBar.Remove Material UI AppBar Box Shadow easily .