相关疑难解决方法(0)

我在反应中使用 material-ui。假设我有这些样式的组件

const useStyles = makeStyles(theme => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    '&:hover': {
      cursor: 'pointer',
      backgroundColor: theme.palette.grey[100]
   }
  },
  addIcon: (props: { dragActive: boolean }) => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

function App() {
  const classes = useStyles();
  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

我想使用上面的样式将鼠标悬停在 externalDiv 上时更改 addIcon 的样式。

这是我的例子：https : //codesandbox.io/s/trusting-mcnulty-b1gcd?fontsize=14&hidenavigation=1&theme=dark

我目前正在接受 ReactJS 培训。我正在使用 material-ui 和 JSS（对我来说是全新的）。

我不明白如何简单地选择我的 H6 元素或我的 H6 子元素（dangerStyle）。

任何的想法 ？

谢谢 ！

myJss.js

const myJss = theme => ({
    textCenter : {
        textAlign:'center'
    },
    dangerStyle: {
        fontWeight:'normal',
        color:"#FF0000"
    },
    h6: {
        color:"#00FF00",
        "&.dangerStyle" : {
            fontWeight:'bold',
        }
    }

});
export default myJss;

应用程序.js

import React, { Component } from 'react'
import { withStyles } from "@material-ui/core/styles";
import Danger from 'components/danger'
import myJss from 'assets/jss/myJss.js';

class App extends Component {

    constructor (props) {
        super(props)
    }

    render () { …

我开始研究material-ui并在SandBox中创建一个简单的应用程序： https: //codesandbox.io/s/eager-ride-cmkrc

jss 的风格对我来说很不寻常，但是如果你帮我做这两个简单的练习，那么我就会明白一切。

第一：我想要将ButtonLeft和的共同属性合并ButtonRight到新类中并扩展它：（https://github.com/cssinjs/jss-extend#use-rule-name-from-the-current-styles-object）

ButtonControll: {
    display: "none",
    position: "absolute",
    fontSize: "24px"
},
ButtonLeft: {
    extend: 'ButtonControll',
    left: "0",
},
ButtonRight: {
    extend: 'ButtonControll',
    right: "0",
}

但这不起作用=(

第二：我希望当您将鼠标悬停在容器上时出现箭头，所以我这样写：

"&:hover .MuiIconButton-root": {
    display: "block"
}

问题：MuiIconButton-root它是所有 IconButtons 的基类名称吗？但我想要这样的东西：

"&:hover ButtonLeft": {
    display: "block",
    backgroundColor: 'red' 
},
"&:hover ButtonRight": {
    display: "block",
    fontSize: '50px' 
}

请帮助我完成这两个简单的任务，然后我就会明白一切=）