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

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 库）几乎不起作用，要在悬停时更改颜色按照文档 Themes 部分中的说明设置主题

首先获取 import withStyles 并定义一个主题。

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 provides its own way of styling using CSS in JS (JSS). 它提供了一个 withStyles 高阶组件和一个 withTheme 并允许您在全局主题级别设置样式。您还可以为自定义样式的某些组件传递 class 名称。

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

此外，您的 CSS 悬停选择器需要包含父 CSS 选择器：

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

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

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

React hover style not working when used with Radium and Material-UI

css

reactjs

material-ui

react-redux

radium