search

cssinjs / styled-jss

Styled Components on top of JSS.
http://cssinjs.org/styled-jss
MIT License
217 stars 25 forks source link

Mixing style objects and functions messes up specificity resolution #74

Open dzearing opened 5 years ago

dzearing commented 5 years ago

Expected:

const Title = styled("h1")(p => ({
  background: "blue"
}));

const Title2 = styled(Title)({
  background: "green"
});

Expected: Title2 is green

Resulted: Title2 is blue, because it has 2 class names and one of them loses the specificity war.

Repro: https://codesandbox.io/s/styled-jss-playground-repro-mo3c8

kof commented 5 years ago

I am working on a new styled API on top of the new react-jss hooks based API, so I need to check if this also happens there https://github.com/cssinjs/jss/pull/1094