Css 悬停式'&；：悬停：{}'；不'；t在react组件内的按钮不起作用

这几天我在使用react组件，在将我的一个按钮设置为悬停样式时遇到了一些问题。下面是我在组件中使用的代码片段

const darkTheme = createMuiTheme({
    palette: {
        type: 'dark',
        secondary:amber
    },
    typography: {
        useNextVariants: true,
    }
});

const lightTheme = createMuiTheme({
    palette: {
        type: 'light',
        secondary:amber
    },
    typography: {
        useNextVariants: true,
    }
});

以上是我正在使用的自定义主题

class APIWidget extends Widget {

constructor(props) {
    super(props);

    this.styles = {
        button: {
            backgroundColor: amber[500],
            '&:hover': {
                backgroundColor: amber[700],
            },
            position: 'absolute',
            bottom: 20,
            right: 20
        },
    };
}

render() {
    return (
        <MuiThemeProvider theme={this.props.muiTheme.name === 'dark' ? darkTheme : lightTheme}>
                <Button variant="contained" color="secondary" style={this.styles.button}>
                    <ArrowBack style={{marginRight:15}}/>
                Back
                </Button>
        </MuiThemeProvider>
    );
}
}
global.dashboard.registerWidget('APIWidget', APIWidget);

类APIWidget扩展小部件{
建造师（道具）{
超级（道具）；
此参数为0.styles={
按钮：{
背景颜色：琥珀色[500]，
“&：悬停”：{
背景颜色：琥珀色[700]，
},
位置：'绝对'，
底数：20，
右：20
},
};
}
render（）{
返回(
返回
);
}
}
global.dashboard.registerWidget（'APIWidget'，APIWidget）；

我正在使用材质ui，并从中导入颜色。我的按钮背景色有效，而悬停颜色无效。 请您指出我的代码中是否有任何错误，或者建议任何获得必要悬停颜色的方法。

---

提前感谢。

您不能在内联样式中利用伪类，例如

：hover

。相反，样式需要在CSS类中。下面是一个示例（基于您的APIWidget类），使用

和

生成CSS类

import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import amber from "@material-ui/core/colors/amber";
import blue from "@material-ui/core/colors/blue";
import React from "react";
import ArrowBack from "@material-ui/icons/ArrowBack";

const darkTheme = createMuiTheme({
  palette: {
    type: "dark",
    primary: amber,
    secondary: blue
  }
});
const styles = (theme) => ({
  button: {
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "blue"
    },
    position: "absolute",
    bottom: 20,
    right: 20
  }
});

class APIWidget extends React.Component {
  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <Button
          variant="contained"
          color="secondary"
          className={this.props.classes.button}
          startIcon={<ArrowBack />}
        >
          Back
        </Button>
      </MuiThemeProvider>
    );
  }
}
export default withStyles(styles)(APIWidget);

导入{
创造博物馆，
音乐提供者，
风格
}来自“@material ui/core/styles”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/colors/amber”导入琥珀色；
从“@material ui/core/colors/blue”导入蓝色；
从“React”导入React；
从“@material ui/icons/ArrowBack”导入箭头；
常量暗色调=创建明暗色调({
调色板：{
类型：“黑暗”，
初级：琥珀色，
中学：蓝色
}
});
常量样式=（主题）=>({
按钮：{
背景颜色：“红色”，
“&：悬停”：{
背景颜色：“蓝色”
},
位置：“绝对”，
底数：20，
右：20
}
});
类APIWidget扩展了React.Component{
render（）{
返回(
你可以用镭-