Javascript 芯片悬停时会变色

我在我的代码中使用了一个芯片，当鼠标在上面时，我想改变颜色。我试着使用

hover:{
            backgroundColor: 'red',
        }

我使用了

constyledchip=withStyles（…

但是不行！有人能帮我吗？谢谢你的建议

代码类似于

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Chip from '@material-ui/core/Chip';

const styles = theme => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    flexWrap: 'wrap',
  },
  chip: {
    margin: theme.spacing.unit,
  },
});

const StyledChip = withStyles({
  root: {
    backgroundColor: 'white',
  },
  '&:hover': {
    backgroundColor: 'red',
  }
})(Chip);


function Chips(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>

      <StyledChip
        avatar={
          <Avatar>
            <FaceIcon />
          </Avatar>
        }
        label="Clickable Deletable Chip"
      />
    </div>
  );
}

Chips.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Chips);

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Chip”导入芯片；
常量样式=主题=>({
根目录：{
显示：“flex”，
为内容辩护：“中心”，
flexWrap:“wrap”，
},
芯片：{
边距：theme.space.unit，
},
});
const StyledChip=带样式({
根目录：{
背景颜色：“白色”，
},
“&：悬停”：{
背景颜色：“红色”，
}
})（芯片）；
功能芯片（道具）{
常量{classes}=props；
返回(
);
}
Chips.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（芯片）；

---

我尝试以不同的方式修复它，但不起作用

传递给

with styles

的对象中的第一级键只是可以使用的键（在传递给组件的

类中）来获取
with styles
生成的实际CSS类名

因此，当您有以下情况时：

const StyledChip = withStyles({
  root: {
    backgroundColor: 'white',
  },
  '&:hover': {
    backgroundColor: 'red',
  }
})(Chip);

.root-generated-class-name {
  background-color: white;
}
.root-generated-class-name:hover {
  background-color: red;
}

这意味着
Chip
可以访问两个不同的类——一个通过
props.classes.root
将背景设置为白色，另一个通过
props.classes['&:hover']
具有将背景设置为红色的效果。
芯片
组件根本不会看到第二类，因此没有效果

但是，如果使用以下语法：

const StyledChip = withStyles({
  root: {
    backgroundColor: "white",
    "&:hover": {
      backgroundColor: "red"
    }
  }
})(Chip);

“&:hover”现在是
根类定义的部分。现在
&
表示“该键所属的类”，因此将生成如下CSS：

const StyledChip = withStyles({
  root: {
    backgroundColor: 'white',
  },
  '&:hover': {
    backgroundColor: 'red',
  }
})(Chip);

.root-generated-class-name {
  background-color: white;
}
.root-generated-class-name:hover {
  background-color: red;
}

在本例中，
props.classes.root
的值为
root生成的类名

下面是一个工作示例：

你能不能就你在这里尝试过的内容做一个简单的工作示例：？请查看并编辑你的问题，以包括一个刚刚更新的问题@mathiasfk