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

Question

我正在使用Radium库在react中进行内联样式设置。 使用它可以对其他组件很好地工作，但是我在Material-UI组件方面遇到问题。 当我将鼠标悬停在Paper上时，它不会将颜色更改为绿色。 怎么了 我该如何解决 ？

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库）几乎无法工作，要更改悬停时的颜色，您将必须按照文档的“ 主题”部分所述设置主题

首先使用styles抓取导入并定义一个主题。

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


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

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

const CustomPaper = withStyles(customStyles)(Paper);

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

     <CustomPaper
     />

希望这可以帮助。

Answer 2

Material UI提供了自己的使用JS（JSS）中CSS样式的方式。 它提供了withStyles高阶组件和withTheme并允许您在全局主题级别进行样式设置。 您还可以为某些组件传递类名称以进行自定义样式。

您不需要使用Radium来设置Material UI组件的样式。

另外，用于悬停的CSS选择器还需要包含父CSS选择器：

const paperStyle = {
  backgroundColor: 'red',
  '&:hover': {
    backgroundColor: 'green'
  }
}

return (
  <Paper styles={paperStyle}>
    <Typography variant="h1">Hi</Typography>
  </Paper>
);