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!

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!

• javascript
• css
• reactjs
• material-ui

3 Answers 3

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

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>

You should just set boxShadow to none:

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