我有几种颜色(绿色,黄色,蓝色等)实现芯片,默认情况下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),
},
},
最后,这可以通过覆盖所需的所有颜色的芯片组件来完成,但必须有更好的方法 .
1 回答
您可以创建一个工厂函数,该函数返回具有您选择颜色的组件,并覆盖您问题中突出显示的行为:
您可以通过调用此函数动态生成新的变体,而不是为每种颜色创建单独的组件:
有关正常工作的版本,请参见code sandbox .