Is there a way to nest like in SASS

[SamuelBolduc]

I'm using react-jss.

In SASS, I would do something like this:

.button {
  background: grey;

  &.active {
    background: orange;
  }
}

Is there a way to do the same in JSS? I tried this:

createUseStyles({
  button: {
    background: "grey",

    "&$active": {
       background: "orange",
    },
});

But when I want to add both classes to an element, Typescript complains that the active class doesn't exist.

[rtivital]

You need to define active separately for this to work:

createUseStyles({
  active: {},
  button: {
    background: "grey",

    "&$active": {
       background: "orange",
    },
});

[SamuelBolduc]

That's what I've been doing but it seemed redundant a little :/ am I understanding it correctly that in all cases the classes need to be defined at the top level of the createUseStyles() object argument?

[rtivital]

Yes