与 Radium 和 Material-UI 一起使用时，React 悬停样式不起作用

Question

我正在使用 Radium 库在 React 中进行内联样式。使用它对于其他组件效果很好，但我在使用 Material-UI 组件时遇到问题。当我将鼠标悬停在纸张上时，它不会将颜色更改为绿色。这是怎么回事？我该如何解决 ？

import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '@material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';

class AchievementsHome extends Component {

    render() {

        return <>
            <Grid container alignItems="center" direction="column">
                <h1>Achievements</h1>

                <Paper
                style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
                 >
                   <h1>Hi</h1>
                </Paper>
            </Grid>
        </>
    }
}

const mapStateToProps = (state) => {
    return {
        achievements: state.achievements
    }
}

export default connect(mapStateToProps)(Radium(AchievementsHome)); 

Answer 1

使用 Material UI 外部样式（因此样式不直接来自 Material UI 库）几乎无法工作，要更改悬停时的颜色，您必须按照文档的主题部分中的说明设置主题

首先获取 withStyles 的导入并定义一个主题。

import { withStyles } from "@material-ui/core/styles";


const customStyles = theme => ({
  root: {
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "green"
    }
  }
});

然后定义一个用 withStyles 包装的新组件：

const CustomPaper = withStyles(customStyles)(Paper);

在渲染中使用您定义的组件：

     <CustomPaper
     />

希望这可以帮助。