admin管理员组

文章数量:1208153

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
Share Improve this question asked Jul 2, 2020 at 18:08 SnookumsSnookums 1,3405 gold badges23 silver badges50 bronze badges
Add a comment  | 

3 Answers 3

Reset to default 13

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' }} >

本文标签：

版权声明：本文标题：javascript - How to override the &quot;MuiPaper-elevation1&quot; atrribute in a Card component in Material-UI? - Stack O 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738762465a2111042.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。