如何在材料-ui中点击卡片时添加涟漪效果

Question

有没有办法可以在点击时为材料-ui卡组件添加涟漪效果.

http://www.material-ui.com/#/components/card

而且我还想知道,是否有可能将涟漪效应置于卡组件的内容之上,而不是它显示为背景.

Answer 1

2021 年更新

单击时添加波纹效果的最惯用方法Card是使用CardActionArea。该组件继承了ButtonBase. Card当悬停和聚焦时，它还会更改背景颜色（与 不同ButtonBase）：

<Card>
  <CardActionArea>
    <CardContent>
      {...}
    </CardContent>
  </CardActionArea>
</Card>

Answer 2

我可以看到这个问题没有得到回答，因此我将提供一个最新的解决方案（按material-uiv。0.18.7（稳定）编写：

您需要导入波纹高阶补偿。（HOC）为：

import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';

然后，您可以使用来包装您选择的任何组件TouchRipple，例如：

<TouchRipple>
   <div>
     MY RIPPLING DIV
   </div>
</TouchRipple>

或者，如果您需要基于CSS类的方法，则可以使用materialize lib-> https://react-materialize.github.io/#/

在这种情况下，就像waves在material-ui上为prop 添加一个值一样简单Button，例如：

<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>

Answer 3

我注意到TouchRipple已移出internal目录。现在可以在ButtonBase文件夹中使用它。

这是我使用ButtonBase组件能够添加波纹效果的方式-

基本上，您包装了组件，<Card>在内部<ButtonBase>这样说，然后为您ButtonBase进行TouchRipple设置-

<ButtonBase>
     <Card>
         ....
     </Card>
</ButtonBase>

这是一个Codesandbox链接，可以正常运行。我知道这不是最好的方法。您可以直接使用TouchRipple/ Ripple 组件，但是我发现这种方法非常易于使用。

希望这可以帮助。