点击 Material UI <Button /> 更改波纹颜色答案

【问题标题】：Change Ripple Color on click of Material UI <Button />点击 Material UI <Button /> 更改波纹颜色
【发布时间】：2019-10-03 19:15:33
【问题描述】：

这是我的<MyButton /> 组件

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    backgroundColor: 'green',
    "&:hover": {
      backgroundColor: "red"
    },
  },
});

function MyButton(props) {

  return (
    <Button
      className={props.classes.button} >
      {props.text}
    </Button>
  );
}

export default withStyles(styles)(MyButton);

目前，按钮上有默认的点击效果，点击时会变亮/变亮（参见此处：https://material-ui.com/demos/buttons/）。但是，我希望单击按钮时“波纹”的颜色为blue。

我试过了

"&:click": {
    backgroundColor: "blue"
},

和

"&:active": {
    backgroundColor: "blue"
},

不过运气不好。单击按钮时如何更改波纹的颜色？

【问题讨论】：

查看material-ui.com/api/touch-ripple/#touchripple-api
@sarvonks 不确定如何将其应用于<MyButton /> 组件。

标签： javascript reactjs material-ui

【解决方案1】：

这是一个展示如何修改按钮波纹的示例：

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const styles = theme => ({
  button: {
    backgroundColor: "green",
    "&:hover": {
      backgroundColor: "red"
    }
  },
  child: {
    backgroundColor: "blue"
  },
  rippleVisible: {
    opacity: 0.5,
    animation: `$enter 550ms ${theme.transitions.easing.easeInOut}`
  },
  "@keyframes enter": {
    "0%": {
      transform: "scale(0)",
      opacity: 0.1
    },
    "100%": {
      transform: "scale(1)",
      opacity: 0.5
    }
  }
});

function MyButton({ classes, ...other }) {
  const { button: buttonClass, ...rippleClasses } = classes;
  return (
    <Button
      TouchRippleProps={{ classes: rippleClasses }}
      className={buttonClass}
      {...other}
    />
  );
}

export default withStyles(styles)(MyButton);

波纹的默认不透明度为 0.3。在示例中，我将其增加到 0.5，以便更容易验证波纹是否为蓝色。由于按钮背景为红色（由于悬停样式），因此结果为紫色。如果您通过键盘移动到按钮，您将获得不同的整体效果，因为蓝色将叠加在按钮的绿色背景之上。

你会在我的回答中找到一些额外的背景：How to set MuiButton text and active color

波纹样式的主要资源是它的源代码：https://github.com/mui-org/material-ui/blob/v4.10.2/packages/material-ui/src/ButtonBase/TouchRipple.js

JSS 关键帧文档：https://cssinjs.org/jss-syntax/?v=v10.3.0#keyframes-animation

回答演示关键帧的使用：How to apply custom animation effect @keyframes in MaterialUI using makestyles()

【讨论】：

【解决方案2】：

使用 CSS - 有时可能很难识别 MUI 组件的类，但对于我们使用呈现为按钮的 <ListItem> 元素而言：

.MuiListItem-button:hover {
  background-color: rgba(23, 93, 131, 0.12) !important;
}
.MuiTouchRipple-rippleVisible {
  color: #005d83 !important;
}

注意：我们使用深蓝色并自定义了background-color 属性，并带有一些不透明度。

【讨论】：

【解决方案3】：

这是 Material-UI 4.9.10

的 hack

为按钮添加一个类，然后将下面的代码添加到给定的类

 Btn:{
    "& .MuiTouchRipple-root span":{
      backgroundColor: 'red!important',
      opacity: .3,
    },
},

【讨论】：

仅供参考——我已经更新了我的答案（最初是为 v3 编写的）以适用于 v4（不诉诸“！important”）。

【解决方案4】：

我已将this 答案中的解决方案改编为与styled components 和emotion/styled 一起使用。

const ButtonStyledWithSC = styledSC(Button)`
  && {
    background-color: magenta;
    width: 10rem;
    height: 3rem;
    margin: 10px;

    &:hover {
      background-color: white;
    }

    > .MuiTouchRipple-root span {
      background-color: cyan;
    }
  }
`;

【讨论】：