React

React@16.8 upwards is required for Themed JSS integration.

👉 Define your theme and provide it in the context using <Themed/> component:

app.jsx
1linkimport { theme } from 'themed-jss'

2linkimport { Themed } from 'themed-jss/react'

3link

4linkconst myTheme = theme(

5link  {

6link    background: 'white',

7link    text: 'black',

8link    primary: 'blue',

9link  },

10link  {

11link    background: 'black',

12link    text: 'white',

13link  }

14link)

15link

16linkexport function App() {

17link  return (

18link    <Themed theme={myTheme}>

19link      ...

20link    </Theme>

21link  )

22link}

👉 Your components can use themed styles using useThemedStyle() hook:

1linkimport { style } from 'themed-jss'

2linkimport { useThemedStyle } from 'themed-jss/react'

3link

4linkconst BtnStyle = style(theme => ({

5link  background: theme.primary,

6link  color: theme.background,

7link  borderRadius: 3,

8link  border: `2px solid ${theme.primary}`,

9link  cursor: 'pointer',

10link

11link  '&:hover': {

12link    background: 'transparent',

13link    color: `${theme.primary} !darkmode`,

14link  }

15link}))

16link

17linkexport function Btn() {

18link  const cls = useThemedStyle(BtnStyle)

19link

20link  return (

21link    <button className={cls}>Click Me!</button>

22link  )

23link}

⚠️ If theme is not provided in context using <Themed/>, then useThemedStyle component will return undefined.

linkAccessing Theme

👉 Use useTheme() hook to access the theme directly inside your components:

1linkimport { useTheme } from 'themed-jss/react'

2linkimport { global } from 'themed-jss'

3link

4linkconst someGlobalStyle = global(theme => (...))

5link

6linkfunction MyComponent() {

7link  const theme = useTheme()

8link  theme.add(someGlobalStyle)

9link

10link  return (

11link    <>

12link      ...

13link    </>

14link  )

15link}