Reactjs 如何消除材质UI芯片组件中的悬停、活动、聚焦灰色

我有几种颜色（绿色、黄色、蓝色等）的芯片，默认情况下，MUI芯片带有灰色悬停/活动/聚焦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),
  },
},

---

最后，这可以通过覆盖芯片组件所需的所有颜色来实现，但必须有更好的方法。

您可以创建一个工厂函数，返回具有您选择的颜色的组件，并覆盖问题中突出显示的行为：

从“React”导入React；
从“材质ui/样式”导入{withStyles}；
从“材料界面/芯片”导入芯片；
从“材质ui/styles/colorManipulator”导入{强调，淡入}；
常量芯片工厂=（颜色=null，删除IConColor=null）=>{
常量样式=主题=>{
const backgroundColor=强调（颜色| | theme.palete.background.default，0.12）；
const deleteIconColor=fade（deleteIconColor | | | theme.palete.text.primary，0.26）；
返回{
根目录：{
颜色：theme.palette.GetContractText（背景色），
背景色，
},
可点击：{
光标：“指针”，
“&：悬停，&：聚焦”：{
背景色：强调（背景色，0.08），
},
“&：活动”：{
背景色：强调（背景色，0.12），
},
},
可删除：{
“&：焦点”：{
背景色：强调（背景色，0.08），
},
},
删除图标：{
颜色：deleteIconColor，
“&：悬停”：{
颜色：褪色（deleteIconColor，0.4），
},
},
};
};
const CustomChip=（{classes，…props}）=>
;
返回样式（样式）（定制芯片）；
};
出口默认芯片厂；

不必为每种颜色创建单独的组件，您可以通过调用此函数动态生成新的颜色：

//摘自芯片演示
render（）{
常量{classes}=props；
const GreenChip=芯片厂（'0f0'）；
const RedChip=芯片厂（'f00'）；
const BlueChip=芯片厂（'#00f'）；
返回(