Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong CSS specificity

See original GitHub issue

Take the following style as an input:

const style = {
  root: {
    "&:hover": {
      "& .icon": {
        color: "red"
      }
    },
    "&.active": {
      "& .icon": {
        color: "blue"
      }
    }
  },
};

Expected behavior: I would expect the following CSS injected into the page:

.root-0-0-1:hover .icon {
  color: red;
}
.root-0-0-1.active .icon {
  color: blue;
}

Describe the bug: The following CSS is injected in the page:

.root-0-0-1.active .icon {
  color: blue;
}
.root-0-0-1:hover .icon {
  color: red;
}

Codesandbox link:

https://codesandbox.io/s/yjyqmo4vqv

Versions (please complete the following information):

jss: 10.0.0-alpha.11

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:6 (5 by maintainers)

Top GitHub Comments

2reactions

oliviertassinaricommented, Feb 25, 2019

The workaround:

const style = {
  root: {
    "&:hover": {
      "& .icon": {
        color: "red"
      }
    },
    "&.active": {
-     "& .icon": {
+     "&& .icon": {
        color: "blue"
      }
    }
  },
};

Featured in https://github.com/mui-org/material-ui/pull/14650.

0reactions

vlazhcommented, May 3, 2020

Are there any updates?