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

what css does that output? Do you see a `h6 .dangerStyle` entry? If so, then you should just be able to do `
` — Davin Tryon, Oct 10 '19 at 15:46
@DavinTryon : Jss compilated with makeStyles. h6 .dangerStyle cannot work. — stoomm, Oct 10 '19 at 19:07

Ryan Cogswell · Answer 1 · 2019-10-10T20:26:17.567

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:

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...) ? — stoomm, Oct 10 '19 at 20:23
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: https://stackoverflow.com/questions/56448538/using-createmuitheme-to-override-default-styles-on-divs-ps-body/56450285#56450285 — Ryan Cogswell, Oct 10 '19 at 20:26
Ok, @global is the solution ... And I note to avoid having any global styles :) Thanks a lot ! — stoomm, Oct 10 '19 at 21:57
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? — sshaw, Dec 01 '20 at 18:10

score 0 · Answer 2 · answered Jan 15 '22 at 15:18

0

implement CSS nested rules in JSS

'& $selector'

for example:

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

answered Jan 15 '22 at 15:18

Mahdi Afzal

729
10
14

Simple selector and nested selector in JSS

2 Answers2

Linked