Изменить цвет пульсации при щелчке пользовательского интерфейса материала <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 / демки / кнопки / ).Тем не менее, я хочу, чтобы цвет «пульсации» был blue при нажатии кнопки.

Я пытался

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

и

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

Не повезло, хотя.Как изменить цвет пульсации при нажатии кнопки?

Answer 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
  },
  "@keyframes mui-ripple-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);

https://codesandbox.io/s/button-ripple-kz23f

Непрозрачность пульсации по умолчанию составляет 0,3. В примере я увеличил это значение до 0,5, чтобы было легче проверить, что пульсация синего цвета. Поскольку фон кнопки красный (из-за стиля наведения), результат будет фиолетовым. Вы получите другой общий эффект, если перейдете к кнопке с помощью клавиатуры, поскольку синий цвет будет наслоен поверх зеленого фона кнопки.

В моем ответе вы найдете дополнительный фон: Как установить текст MuiButton и активный цвет

Основным ресурсом для стилизации пульсации является ее исходный код: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ButtonBase/TouchRipple.js