相关疑难解决方法(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 并尝试将普通的 css 类转换为 js 文件。

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.navItem {
    float: left;
    flex: 1;
}

.navLink {
    color: white;
    text-decoration: none;
    display: block;
    font-size: '1 rem';
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: '0.0075em';
    opacity: 1;
    text-transform: 'none';
    min-width: 0;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.navLink-static {
    color: white;
    text-decoration: none;
    display: block;
    font-size: '1rem';
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: '0.0075em';
    opacity: 1;
    text-transform: 'none';
    padding: 10px;
    margin-left: 10px; …