Reference Helpers

Reference helpers help with nested styles and referncing other styles:

1linkimport { style, when } from 'themed-jss'

2link

3linkconst styleA = style((theme, $) => ({

4link  // ...

5link

6link  [when(':hover')]: {

7link    color: 'red'

8link  }

9link}))

☝️ Color of elements styled with styleA is red when they are hovered.

1linkimport { style, parentIs } from 'themed-jss'

2link

3linkconst styleA = style((theme, $) => ({

4link  // ...

5link

6link  [parentIs($(styleB))]: {

7link    marginLeft: 32

8link  }

9link}))

☝️ elements styled with styleA will have margin when their parent element is styled with styleB.

1linkimport { style, descendant, not, when } from 'themed-jss'

2link

3linkconst styleA = style((theme, $) => ({

4link  // ...

5link

6link  [when(not(':hover'))]: {

7link    [descendant('input', $(styleB), ':disabled')]: {

8link      background: 'gray'

9link    }

10link  }

11link}))

☝️ When element is not hovered, descendants that are inputs, styled with styleB and are disabled will have a gray background.

You can also use JSS's nested rule for self-referencing to reference the parent rule. For example, the last example can be written as follows, without use of reference helpers:

1linkconst styleA = style((theme, $) => ({

2link  // ...

3link

4link  [`&:not(:hover) input${styleB}:disabled`]: {

5link    background: 'gray'

6link  }

7link}))

linkSelf-Matching Helpers

The following helpers match self (the element having the style) when other elements have specified styles / rules.

linkwhen()

👉 Matches self when also has specified styles / rules:

1link[when($(styleX), not($(styleY)), ':hover')]: { ... }

1link/* sass equivalent */

2link&.class-of-styleX:not(.class-of-styleY):hover { ... }

linkancestorIs()

👉 Matches self when there is an ancestor with given styles / rules

1link[ancestorIs($(styleA))]: { ... }

1link/* sass equivalent */

2link.class-of-styleA & { ... }

linkparentIs()

👉 Matches self when parent (immediate ancestor) has given styles / rules

1link[parentIs('div', $(styleA))]: { ... }

1link/* sass equivalent */

2link.class-of-styleA>& { ... }

linkprecedingIs()

👉 Matches self when the some preceding element has given styles / rules

1link[precedingIs($(styleA), ':focus')]: { ... }

1link/* sass equivalent */

2link.class-of-styleA~& { ... }

linkpreviousIs()

👉 Matches self when the (immediately) previous element has given styles / rules

1link[previousIs('input', $(styleA), not('[type="text"]'))]: { ... }

1link/* sass equivalent */

2link.class-of-styleA+& { ... }

linkOther-Matching Helpers

The following helpers match other elements in relation self.

linkdescendant()

👉 Matches a descendant with given styles / rules

1link[descendant($(styleA))]: { ... }

1link/* sass equivalent */

2link& .class-of-styleA { ... }

linkchild()

👉 Matches a child (immediate descendant) with given styles / rules

1link[child($(styleA), ':last-child')]: { ... }

1link/* sass equivalent */

2link&>.class-of-styleA { ... }

linksucceeding()

👉 Matches an element that comes after self with given styles / rules

1link[succeeding($(styleA), not(':hover'))]: { ... }

1link/* sass equivalent */

2link&~.class-of-styleA { ... }

linknext()

👉 Matches the element coming immediately after self with given styles / rules

1link[next($(styleA), not(':disabled'))]: { ... }

1link/* sass equivalent */

2link&+.class-of-styleA { ... }

linkGeneric Helpers

linkcombined()

👉 Matches elements with all of given styles / rules:

1link[combined($(styleA), $(styleB), not(':disabled'), ':hover')]: { ... }

1link/* sass equivalent */

2link.class-of-styleA.class-of-styleB:not(:disabled):hover { ... }

linkeither()

👉 Matches elements with any one of given styles / rules:

1link[either(

2link  $(styleA),

3link  combined($(styleB), not(':disabled'))

4link)]: { ... }

1link/* sass equivalent */

2link.class-of-styleA,

3link.class-of-styleB:not(:disabled) { ... }