Стиль наведения «&: hover: {}» не работает для кнопки в компоненте реакции

Question

В настоящее время я работаю с реагирующими компонентами, и у меня возникли проблемы с оформлением одной из моих кнопок в стиле наведения. Ниже приведен фрагмент кода, который я использовал в своем компоненте.

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);

Я использую материал пользовательского интерфейса и импортирую цвета из него. Цвет фона моей кнопки работает, а цвет наведения не работает. Можете ли вы указать, есть ли какая-либо ошибка в моем коде или предложить какой-либо метод, чтобы получить необходимый цвет при наведении. Заранее спасибо.

Answer 1

Вот песочница с кодом, показывающая, как это сделать: https://codesandbox.io/s/z6x6l9yn43

Важными аспектами является то, что вам нужно использовать className, а не style, чтобы иметь поддержку псевдоклассов, таких как hover. Метод withStyles обеспечивает правильную работу этих классов.