关于javascript：单击”材质”用户界面<按钮/>时更改波纹颜色

Change Ripple Color on click of Material UI <Button />

这是我的<MyButton />组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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。

我尝试了

1
2
3

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

和

1
2
3

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

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

相关讨论

这里是显示如何修改按钮波纹的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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);

Edit

波纹的默认不透明度为0.3。在示例中，我将该值增加到0.5，以便更轻松地验证波纹是否为蓝色。由于按钮背景为红色(由于悬停样式)，结果为紫色。如果您通过键盘移至该按钮，将会获得不同的总体效果，因为蓝色将层叠在该按钮的绿色背景之上。

您会在这里的答案中找到一些其他背景：如何设置MuiButton文本和活动颜色

波纹样式的主要资源是其源代码：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

演示关键帧的用法：如何使用makestyles()在MaterialUI中应用自定义动画效果@keyframes

我已经根据答案修改了解决方案，以处理样式化的组件和情感/样式化的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

heuristic-feistel-0znpi

这是Material-UI 4.9.10的黑客

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

1
2
3
4
5
6

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