如何解决更改Material-UI概述的芯片焦点和悬停颜色
悬停时尝试将样式添加到Material-UI芯片(概述的变体),但未获得预期的结果。
边框颜色为白色,但背景颜色完全不变。
所以我在质疑backgroundColor是否是正确的属性,但是还有什么呢?
const CustomChip = withStyles(theme => ({
root: {
"&:hover": {
borderColor: "white",backgroundColor: "green"
}
}
}))(Chip);
解决方法
下面是Chip
的概述变体形式的default background-color styles:
/* Styles applied to the root element if `variant="outlined"`. */
outlined: {
backgroundColor: 'transparent','$clickable&:hover,$clickable&:focus,$deletable&:focus': {
backgroundColor: fade(theme.palette.text.primary,theme.palette.action.hoverOpacity),},
在上述样式中,$clickable&
将解析为.MuiChip-clickable.MuiChip-outlined
。重要的方面是,除了伪类(:hover
或:focus
)之外,还使用两个类名来指定此规则。这意味着这些默认样式将比您用于覆盖的样式规则(仅使用一个类名加伪类)具有更大的specificity。为了使覆盖成功,它的特异性必须等于或大于默认样式。
一种简单的方法是将&
加倍。这将导致在规则中两次指定生成的类名(“和”号所指),从而增加了其特异性以匹配默认样式。
这是一个可行的示例:
import React from "react";
import { makeStyles,withStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",justifyContent: "center",flexWrap: "wrap","& > *": {
margin: theme.spacing(0.5)
}
}
}));
const StyledChip = withStyles({
root: {
"&&:hover": {
backgroundColor: "purple"
},"&&:focus": {
backgroundColor: "green"
}
}
})(Chip);
export default function SmallChips() {
const classes = useStyles();
const handleClick = () => {
console.info("You clicked the Chip.");
};
return (
<div className={classes.root}>
<StyledChip variant="outlined" size="small" label="Basic" />
<StyledChip
size="small"
variant="outlined"
avatar={<Avatar>M</Avatar>}
label="Clickable"
onClick={handleClick}
/>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。