Usage

👉 Define your styles as functions of a theme:

1linkimport { style } from 'themed-jss'

2link

3linkconst buttonStyle = style(theme => ({

4link  background: theme.bg,

5link  color: theme.text,

6link  fontSize: 16,

7link  // ...

8link}))

👉 Create themes:

1linkimport { theme } from 'themed-jss'

2link

3linkconst myTheme = theme({

4link  bg: 'white',

5link  text: 'black'

6link})

👉 Use themes to get CSS classes:

1linkconst cssClass = myTheme.class(buttonStyle)

2linkelement.classList.add(cssClass)

linkNested Styling

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

2link

3linkconst buttonStyle = style(theme => ({

4link  background: theme.bg,

5link  color: theme.text,

6link  fontSize: 16,

7link

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

9link    background: theme.text,

10link    color: theme.bg

11link  }

12link}))

linkMedia Queries

1linkimport { style } from 'themed-jss'

2link

3linkconst buttonStyle = style(theme => ({

4link  background: theme.bg,

5link  color: theme.text,

6link  fontSize: 16,

7link

8link  '@media (min-width: 1024px)': {

9link    width: '100%'

10link  }

11link}))

linkGlobal Styles

👉 Use global() to create global styles:

1linkimport { global } from 'themed-jss'

2link

3linkconst myGlobalStyle = global(theme => ({

4link  body: {

5link    background: theme.bg,

6link    color: theme.text

7link  },

8link

9link  a: {

10link    color: theme.primary

11link  }

12link}))

👉 Use .add() method on themes to add these styles:

1linkmyTheme.add(myGlobalStyle)

linkAnimation Keyframes

👉 Use keyframes() to create animation keyframes:

1linkimport { keyframes } from 'themed-jss'

2link

3linkconst myAnimation = keyframes(theme => ({

4link  from: {

5link    background: theme.text

6link  },

7link  to: {

8link    background: 'transparent'

9link  }

10link}))

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

2link  color: theme.background,

3link  animation: $(myAnimation) + ' 1s infinite'

4link}))

linkStyle References

👉 Use reference helpers in combination with $ callback passed to your style function to reference other styles:

1linkimport { parentIs } from 'themed-jss'

2link

3linkconst styleA = style(() => ({ color: 'red' }))

4linkconst styleB = style((theme, $) => ({

5link  color: theme.error,

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

7link    color: theme.bg

8link  }

9link}))

☝️ This means elements styled with styleB should have a color of theme.bg when their parent is styled with styleA.

linkStyle Extension

👉 Use $.extend() for extending other styles:

1linkconst styleA = style( ... )

2link

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

4link  color: theme.background,

5link

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

7link    ...$.extend(styleA),

8link    color: theme.border,

9link  }

10link}))