单击“材质” UI <按钮>时，更改波纹颜色

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

下面是显示如何修改按钮波纹的示例：

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，以便更轻松地验证波纹为蓝色。由于按钮背景为红色（由于悬停样式），结果为紫色。如果您通过键盘移至该按钮，则总体效果会有所不同，因为蓝色将位于按钮的绿色背景之上。

您会在这里的答案中找到其他背景：How to set MuiButton text and active color

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

Answer 2

使用CSS-有时很难识别MUI组件的类，但是对于我们使用的<ListItem>元素（就像按钮一样呈现）而言

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

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

Answer 3

以下是 Material-UI 4.9.10

的黑客

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

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

Answer 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;
    }
  }
`;