javascript - 单击 Material UI 更改波纹颜色
问题描述
这是我的<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"
},
虽然没有运气。单击按钮时如何更改波纹的颜色?
解决方案
这是一个示例,显示如何修改 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,以便更容易验证波纹是否为蓝色。由于按钮背景为红色(由于悬停样式),因此结果为紫色。如果您通过键盘移动到按钮,您将获得不同的整体效果,因为蓝色将叠加在按钮的绿色背景之上。
你会在我的回答中找到一些额外的背景:如何设置 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
这是 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
回答演示关键帧的使用:如何在 MUI 中应用自定义动画效果 @keyframes?
推荐阅读
- powershell - 如何从具有多个变量的 Powershell 输出
- python - 使用 python 生成带有可点击文件的 HTML 目录列表
- android - Flutter 错误:主体可能正常完成,导致返回“null”
- react-native - how to pass dynamic options in nested navigators
- node.js - calculating file size from firebase storage bucket
- gcloud - How do I configure an ip address for my binance trading bot deployed on google cloud?
- python - Regarding about subprocess .Popen
- cakephp - How to conciliate TinyMCE FileUpload and CakePHP
- azure-active-directory - 使用密码重置用户流令牌的 Azure B2C 已过期,无法登录到应用程序主页
- angular - 类型 'HTMLElement' 不可分配给类型 'string | 模板参考
' 当尝试使用 ngx-popover 的 HTML 模板时