javascript - 单击 Material UI <Button/> 更改波纹颜色

Question

这是我的 <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"
},

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

Answer 1

这是一个示例，展示了如何修改 v4 的按钮波纹(v5 示例在下方):

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

---

这是 MUI v5 的类似示例:

import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
import { keyframes } from "@emotion/react";

const enterKeyframe = keyframes`
  0% {
    transform: scale(0);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
`;
const StyledButton = styled(Button)`
  background-color: green;
  &:hover {
    background-color: red;
  }
  && .MuiTouchRipple-child {
    background-color: blue;
  }
  && .MuiTouchRipple-rippleVisible {
    opacity: 0.5;
    animation-name: ${enterKeyframe};
    animation-duration: 550ms;
    animation-timing-function: ${({ theme }) =>
      theme.transitions.easing.easeInOut};
  }
`;
export default StyledButton;

v5 TouchRipple 源代码:https://github.com/mui/material-ui/blob/v5.4.0/packages/mui-material/src/ButtonBase/TouchRipple.js#L92

情感关键帧文档:https://emotion.sh/docs/keyframes

演示关键帧使用的答案:How to apply custom animation effect @keyframes in MUI?