Question

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

document.execCommand(enableObjectResizing, false, "true")

Answer 1

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

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

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

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

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

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

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

2 个答案: