JSS 中的简单选择器和嵌套选择器

Question

我目前正在接受 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 () {
        const { classes } = this.props;
        return (
            <div>
                APP
                <h6>
                    <Danger>Error occured</Danger>
                </h6>
            </div>
        )
    }
}
export default withStyles(myJss)(App)

危险.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import myJss from 'assets/jss/myJss.js';
const useStyles = makeStyles(myJss);

export default function Danger(props) {
    const { children } = props;
    const classes = useStyles();
    return (
        <div className={classes.dangerStyle}>
            {children}
        </div>
    );
}

Answer 1

样式对象中的每个键都将用于生成 CSS 类。像这样的键h6并不针对标签，它只是允许您作为类似于 的类h6进行引用。classes.h6classes.dangerStyle

为了让dangerStyle类在嵌套在h6标记中时表现不同，您可以执行如下操作：

危险.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  dangerStyle: {
    fontWeight: "normal",
    color: "#FF0000",
    "h6 &": {
      color: "#00FF00",
      fontWeight: "bold",
      fontSize: 24
    }
  }
});

export default function Danger(props) {
  const { children } = props;
  const classes = useStyles();
  return <div className={classes.dangerStyle}>{children}</div>;
}

索引.js

import React from "react";
import ReactDOM from "react-dom";

import Danger from "./Danger";
function App() {
  return (
    <div className="App">
      <Danger>Danger not in h6</Danger>
      <h6>
        <Danger>Danger in h6</Danger>
      </h6>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

相关答案和文档：

• jss-插件嵌套文档
• 使用材质 ui createStyles
• Material-ui 中的高级样式
• 在 Material UI 中，如何覆盖选择器选择的组件样式？
• 如何在 JS 中使用 css 实现嵌套悬停样式，Material UI
• 使用 createMuiTheme 覆盖 div、p、body 上的默认样式