如何在MUI中單擊卡片時添加波紋效果

Question

有沒有辦法可以在單擊時為 MUI Card組件添加漣漪效果。

而且我還想知道，是否可以在 Card 組件的內容之上制作漣漪效果，而不是將其顯示為背景。

Answer 1

我注意到 TouchRipple 已移出internal目錄。 它現在位於ButtonBase 文件夾中。

這是我如何通過使用 ButtonBase 組件添加漣漪效果 -

基本上，你包裝你的組件，讓我們說<Card> <ButtonBase> <Card>里面的<Card>像這樣， ButtonBase負責為你設置TouchRipple -

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

這是工作演示的Codesandbox鏈接。 我知道這不是最好的方法。 您可以直接使用TouchRipple / Ripple組件，但我發現這種方式非常易於使用。

希望這可以幫助。

Answer 2

我可以看到這個問題沒有得到解答，所以我將提供一個最新的解決方案（將其寫為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 類的方法，您可以使用 materialize lib -> https://react-materialize.github.io/#/

在這種情況下，就像在 material-ui Button上為waves prop 添加一個值一樣簡單，例如：

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

Answer 3

@xiaofan2406 中采用的方法對我來說從來沒有用過，更不用說傳遞高度、寬度和位置似乎很容易破壞，並且在使用 flexbox 時可能無法實現。

但是我設法讓它像這樣工作：

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

Answer 4

這是更新的解決方案 2021

1. 簡單 您需要使用材料 ui 中的組件包裝您的自定義組件。
2. 然后添加樣式填充：0 解決。
3. 在這里，我希望我的圖像應該具有漣漪效應。

您可以通過用 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 5

官方api似乎不支持它。 但這就是我所做的，當我想使用material-ui漣漪效果時：

使用material-ui/internal/TouchRipple ，看看它的源代碼

用法示例：

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

您需要傳遞內聯樣式以指定與YourComponent的高度、寬度和位置匹配的高度、寬度和位置

Answer 6

2021 更新

單擊Card時添加漣漪效果的最慣用的方法是使用CardActionArea 。 該組件繼承了ButtonBase的 props。 它還會在懸停和聚焦時更改Card背景顏色（與ButtonBase不同）：

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