0

When using makeStyles, how do you refer to generated classnames when creating nested rules?

For example, I have a "container" class, with nested "item" class elements. I want to refer to the generated "item" class in the style definition. I can make it work for a custom non-generated class ("custom"), but the same strategy does not work for generated class names.

https://codesandbox.io/s/material-demo-311tn?file=/demo.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  container: {
    "& > .custom": {
      "&:first-child": {
        backgroundColor: "grey"
      }
    },
    // How do I make this work?
    "& > .item": {
      "&:first-child": {
        color: "white"
      }
    }
  },
  item: {
    padding: "20px"
  }
});

export default function Hook() {
  const classes = useStyles();
  return (
    <div className={classes.container}>
      <div className={`${classes.item} custom`}>Hello</div>
      <div className={`${classes.item} custom`}>World!</div>
    </div>
  );
}
Edward D'Souza
  • 2,453
  • 1
  • 26
  • 24

1 Answers1

1

Prefix the classname with a $ instead of a .

So, instead of

"& > .item"

do

"& > $item"

https://codesandbox.io/s/material-demo-ru95s?file=/demo.js

Edward D'Souza
  • 2,453
  • 1
  • 26
  • 24