Простой селектор и вложенный селектор в 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;

app.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)

danger.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.h6 как на класс, подобный classes.dangerStyle.

Чтобы класс dangerStyle вел себя по-другомубудучи вложенным в тег h6, вы можете сделать что-то вроде следующего:

Danger.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>;
}

index.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-плагин-вложенная документация
• Использование пользовательского интерфейса материалов createStyles
• Расширенное моделирование в пользовательском интерфейсе материалов
• В пользовательском интерфейсе материалов, как я могупереопределить выбранный стиль компонента селектора?
• как использовать css в JS для вложенных стилей при наведении, UI материала
• Использование createMuiTheme для переопределения стилей по умолчаниюна div's, p's, body

Answer 2

Предполагая, что вы звоните Danger, как это

<Danger>
    <div> Error occured </div>
</Danger>

, которое будет компилироваться в

<div className={classes.danger}>
    <div> Error occured </div>
</div>

Теперь вы можете получить к нему доступ со своего jss вот так

danger:{
    '& > div':{
         //all divs inside danger
         '& > h6':{
             //any h6 inside any div inside danger
         }
     }
}