[jss-nested] does not work with function rules

andrewfan commented 5 years ago

  fails: data => ({
    "& a": {
      color: "red"
    },
    "&:hover": {
      background: "red"
    }
  })

styles for a and hover are never applied

https://codesandbox.io/s/k37xj20yy3

kof commented 5 years ago

known https://github.com/cssinjs/jss/issues/682

DurgaPammi commented 5 years ago

how can we right the JSS for the below example :

           <Collapsible trigger="Start here">
<p>This is the collapsible content. It can be any element or React component you like.</p>
                  </Collapsible>

CSS is:

.Collapsibletrigger { display: block; font-weight: 600; text-decoration: none; color: #ffffff; position: relative; border: 1px solid white; padding: 10px; background: #f3f4f4; color: black; } .Collapsibletrigger:after { font-family: 'FontAwesome'; content: '\f107'; position: absolute; right: 10px; top: 10px; display: block; transition: transform 300ms; } .Collapsibletrigger.is-open:after { transform: rotateZ(180deg); } .Collapsibletrigger.is-disabled { opacity: 0.5; background-color: grey; }

Can You please any one help me about this

cssinjs / jss

[jss-nested] does not work with function rules #865