Simple selector and nested selector in JSS

Question

I'm currently training on ReactJS. I'm using material-ui and JSS (totally new for me).

I don't understand how can I simply select my H6 element or my H6 children elements (dangerStyle).

Any idea ?

Thanks !

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>
    );
}

Rashid

what css does that output? Do you see a h6 .dangerStyle entry? If so, then you should just be able to do <div className="dangerStyle"> – Eulogist

@DavinTryon : Jss compilated with makeStyles. h6 .dangerStyle cannot work. – Rashid

Answer 1

Each key in your styles object is going to be used to generate a CSS class. A key like h6 does not target the h6 tag, it just allows you to reference classes.h6 as a class similar to classes.dangerStyle.

In order to have the dangerStyle class behave differently when nested within an h6 tag, you can do something like the following:

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);

Related answers and documentation:

• jss-plugin-nested documentation
• Using material ui createStyles
• Advanced styling in material-ui
• In Material UI, How can I override a selector selected component style?
• how to use css in JS for nested hover styles, Material UI
• Using createMuiTheme to override default styles on div's, p's, body

Meseems

Thanks ! The "h6 &" was the solution. It changes when you are used to CSS... It's the only existing solution ? And how can I target a simple html tag (h1, ... , h6, p, etc...) with JSS (except to add a specific class...) ? – Rashid

In general, the idea with JSS is to avoid having any global styles (which is what you have if you target tags directly), but it does support global styles: #56449038 – Meseems

Ok, @global is the solution ... And I note to avoid having any global styles :) Thanks a lot ! – Rashid

Usually it's the parent that has the "context" which cascades to the child. In this case the child is bound the parent. h6.dangerChild ELEMENT where ELEMENT knows nothing about its ancestors (as it should) seems to be a better architectural approach. This does not seem possible. Is it? – Discussant

Answer 2

implement CSS nested rules in JSS

'& $selector'

for example:

'&$dangerStyle' : {
  fontWeight:'bold',
}

Surculose