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

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!

javascriptcssreactjsmaterial-ui


Solution 1:[1]

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>

Solution 2:[2]

You should just set boxShadow to none:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jetchy
Solution 2 Abdelhadi Abdo

Related Questions