如何在 MUI 中单击卡片时添加波纹效果

Question

有什么方法可以在单击时向 MUI Card 组件添加涟漪效果。

我也想知道，是否可以让涟漪效果出现在卡片组件的内容之上，而不是作为背景显示。

Answer 1

官方api好像不支持。但这就是我所做的，当我想使用 material-ui 波纹影响时：

使用material-ui/internal/TouchRipple，看看它的source code

用法示例：

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

您需要通过内联样式来指定其高度、宽度和位置，以匹配YourComponent的高度、宽度和位置

Answer 2

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

但是我设法让它像这样工作：

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

Answer 3

我可以看到这个问题没有得到回答，所以我会提供一个最新的解决方案（写成 material-ui is v. 0.18.7 (stable):

您需要导入波纹高阶合成。 (HOC) 作为：

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

然后你可以用TouchRipple包装你选择的任何组件，比如：

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

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

在那种情况下，就像在 material-ui Button 上向 waves 属性添加一个值一样简单，例如：

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

Answer 4

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

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

基本上，你包装你的组件，假设 <Card> 像这样放在 <ButtonBase> 中，ButtonBase 负责为你设置 TouchRipple -

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

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

希望对您有所帮助。

Answer 5

这是 2021 年更新的解决方案

简单您需要使用 material ui 中的组件包装您的自定义组件。
然后加上style 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>
      );
}

Answer 6

2021 年更新

单击 Card 时添加涟漪效果的最惯用方法是使用 CardActionArea. This component 继承 ButtonBase 的道具。它还会在悬停和聚焦时更改 Card 背景颜色（与 ButtonBase 不同）：

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

Answer 7

使用 `component` 属性

您可以将 component 属性指定为您希望它成为的组件，而不是换行。也就是对于这个use-case；

import ButtonBase from '@material-ui/core/ButtonBase';
...
<Card component = {ButtonBase}>
  <CardContent>
    ...
  </CardContent>
</Card>

如果您对卡片的高度或宽度有疑问，请添加 sx 属性；

<Card component={ButtonBase} sx={{height:'100%', width:'100%'}}>
   ...
</Card>

如果 ButtonBase 弄乱了页面上的所有其他按钮，最好只使用 Button；

import Button from '@mui/material/Button';
...
<Card component = {Button}>
  <CardContent>
    ...
  </CardContent>
</Card>

如何在 MUI 中单击卡片时添加波纹效果

How to add ripple effect when clicking Card in MUI

javascript

reactjs

material-design

material-ui

这是 2021 年更新的解决方案

2021 年更新

使用 `component` 属性

如何在 MUI 中单击卡片时添加波纹效果

How to add ripple effect when clicking Card in MUI

javascript

reactjs

material-design

material-ui

这是 2021 年更新的解决方案

2021 年更新

使用 component 属性

使用 `component` 属性