如何消除Material UI Chip组件中的悬停、活动、聚焦灰色
如何消除Material UI Chip组件中的悬停、活动、聚焦灰色
提问于 2017-12-14 15:39:55
我有几种颜色的芯片(绿色，黄色，蓝色等)默认情况下，MUI Chip带有灰色悬停/活动/焦点CSS样式。我需要在MUI芯片组件中消除这种悬停/活动/聚焦的灰色背景颜色。因此，我再一次不想用另一种颜色替换灰色，而是要完全消除以下CSS样式：
clickable: {
// Remove grey highlight
WebkitTapHighlightColor: theme.palette.common.transparent,
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: emphasize(backgroundColor, 0.08),
},
'&:active': {
boxShadow: theme.shadows[1],
backgroundColor: emphasize(backgroundColor, 0.12),
},
},
deletable: {
'&:focus': {
backgroundColor: emphasize(backgroundColor, 0.08),
},
},最后，这可以通过覆盖所有所需颜色的Chip组件来完成，但必须有更好的方法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-15 04:59:11
您可以创建一个工厂函数，该函数返回具有您选择的颜色的组件，并覆盖问题中突出显示的行为：
import React from 'react';
import { withStyles } from 'material-ui/styles';
import Chip from 'material-ui/Chip';
import { emphasize, fade } from 'material-ui/styles/colorManipulator';
const ChipFactory = (color = null, deleteIconColor = null) => {
const styles = theme => {
const backgroundColor = emphasize(color || theme.palette.background.default, 0.12);
const deleteIconColor = fade(deleteIconColor || theme.palette.text.primary, 0.26);
return {
root: {
color: theme.palette.getContrastText(backgroundColor),
backgroundColor,
},
clickable: {
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: emphasize(backgroundColor, 0.08),
},
'&:active': {
backgroundColor: emphasize(backgroundColor, 0.12),
},
},
deletable: {
'&:focus': {
backgroundColor: emphasize(backgroundColor, 0.08),
},
},
deleteIcon: {
color: deleteIconColor,
'&:hover': {
color: fade(deleteIconColor, 0.4),
},
},
};
};
const CustomChip = ({ classes, ...props }) =>
<Chip classes={classes} {...props} />;
return withStyles(styles)(CustomChip);
};
export default ChipFactory;无需为每种颜色创建单独的组件，您可以通过调用此函数动态生成新的变体：
// excerpt from Chips demo
render() {
const { classes } = props;
const GreenChip = ChipFactory('#0f0');
const RedChip = ChipFactory('#f00');
const BlueChip = ChipFactory('#00f');
return (
<div className={classes.row}>
<GreenChip label="Basic Chip" className={classes.chip} />
<RedChip
avatar={<Avatar>MB</Avatar>}
label="Clickable Chip"
onClick={handleClick}
className={classes.chip}
/>
<BlueChip
avatar={<Avatar src="/static/images/uxceo-128.jpg" />}
label="Deletable Chip"
onRequestDelete={handleRequestDelete}
className={classes.chip}
/>
</div>
);
}有关工作版本，请参阅此code sandbox。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47817109
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
