How to override the "MuiPaper-elevation1" atrribute in a Card component in Material-UI?

user_11752443 0
Viewed 7113

I have a Card component which is as below in HTML: <div class="MuiPaper-root MuiCard-root makeStyles-Card-5 MuiPaper-elevation1 MuiPaper-rounded">

And I need to change the MuiPaper-elevation1 to MuiPaper-elevation0, which remove the shadow.

I tried

    <Card
      MuiPaperElevation0
      MuiPaper-elevation0
      style={{ boxShadow: 0 }}
    >

but it doesn't work, nothing changed and the shadow is still there.

Could someone teach me how to do it plz? Thx!

material-ui reactjs css javascript
3 Answers

You can use the underlying Paper props like this:

<Card
  elevation={0}
>

Essentially you can apply any prop to card that you would apply to the Paper element

user_118153100

The Card API accepts an elevation prop (inherited from the Paper component). In order to change the elevation, you pass it a number. This will remove the box shadow without needing to add your own styling API: https://material-ui.com/api/paper/

<Card elevation={0}>
....
</Card>
user_18574780

You should just set boxShadow to none:

<Card style={{ boxShadow: 'none' }} >
user_90271710
Related