这是 2021 年更新的解决方案

Question

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

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

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

Answer 1

我可以看到这个问题没有得到解答，所以我提供了一个最新的解决方案（写成material-ui是v.0.18.7（稳定）：

您需要导入ripple高阶comp。（HOC）as：

import TouchRipple from 'material-ui/internal/TouchRipple';

然后你可以用ToucheRipple包裹你选择的任何组合，如：

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

或者，如果您需要基于CSS类的apporach，可以使用materialize lib - ＆gt; https://react-materialize.github.io/#/

在这种情况下，它就像在waves上为Button道具添加值一样简单，例如：

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

Answer 2

我注意到TouchRipple已移出internal目录。它现在可以在ButtonBase folder中找到。

以下是我如何使用ButtonBase组件添加涟漪效果 -

基本上，你包裹你的组件，让我们在<Card>中说<ButtonBase>就像这样，而ButtonBase照顾TouchRipple为你设置 -

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

以下是工作演示的Codesandbox链接。我知道这不是最好的方法。您可以直接使用TouchRipple / Ripple组件，但我发现这种方式非常易于使用。

希望这有帮助。

Answer 3

@ xiaofan2406采用的方法对我来说没有用，更不用说通过高度，宽度和位置似乎很容易破坏，使用flexbox时可能无法实现。

但是我设法让它像：

<YourComponent>
    <TouchRipple>
        {children}
    </TouchRipple>
</YourComponent>

Answer 4

官方api似乎不支持它。但这就是我所做的，当我想使用material-ui涟漪影响时：

使用material-ui/internal/TouchRipple，查看其source code

用法示例：

<YourComponent>
    <TouchRipple style={style}/>
    {children}
</YourComponent>

您需要传递内联样式以指定与YourComponent的高度，宽度和位置匹配的高度，宽度和位置

Answer 5

这是 2021 年更新的解决方案

简单您需要使用材料 ui 中的组件包装自定义组件。
然后添加样式 padding: 0 解决。
在这里，我希望我的图像能够产生涟漪效应。

您可以通过使用 Grid 和 props 容器进行自定义


import { Button } from "@material-ui/core";

function ImageCard(props){

return (
            <Button style={{ padding: 0, borderRadius: "16px" }}>
              {/*my custom component you can use any component even material ui component also*/}
                <img
                  src={yourImageUrl}
                  alt="img"
                  style={{
                    height: 200,
                    width: 400,
                    borderRadius: "16px",//optional
                  }}
                />
              </Button>
      );
}

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

5 个答案:

这是 2021 年更新的解决方案