Question

这些天，我正在使用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);

我正在使用材质ui，并从中导入颜色。我的按钮背景色有效，而悬停颜色不起作用。您能否指出我的代码中是否有任何错误或建议任何方法以获取必要的悬停颜色。预先感谢。

Answer 1

下面是一个代码沙箱，显示了如何执行此操作：https://codesandbox.io/s/z6x6l9yn43

重要的方面是，您需要使用className而不是style来支持诸如悬停之类的伪类。 “ withStyles”方法负责使这些类正常工作。

悬停样式'＆：hover：{}'不适用于react组件中的按钮

1 个答案: