代码之家 › 专栏 › 技术社区 › Natesh bhat

与镭和材质UI一起使用时,反应悬停样式不起作用

radium material-ui react-redux reactjs css

Natesh bhat · 技术社区 · 7 年前

我在react中使用Radium库进行内联样式设置。使用它可以很好地用于其他组件,但我对材质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));

2 回复 | 直到 7 年前

Dmitriy 7 年前

由于材质UI外部样式(因此样式不直接来自材质UI库)几乎不起作用,要更改悬停时的颜色,必须按照中的说明设置主题 Themes 文件部分

首先用样式获取导入并定义一个主题。

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


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

然后定义一个新组件,该组件使用以下样式进行包装:

const CustomPaper = withStyles(customStyles)(Paper);

在渲染中,使用定义的组件:

     <CustomPaper
     />

希望这有帮助。

user9903 user9903 7 年前

Material UI provides its own way of styling using CSS in JS (JSS). 它提供了一个 withStyles 高阶分量与a withTheme

您不需要使用镭来设置材质UI组件的样式。

此外,用于悬停的CSS选择器需要包括父CSS选择器:

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

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

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

2 年前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

2 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

2 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

2 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

2 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

2 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

2 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

2 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

2 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

2 年前