react-jss.md

React-JSS Integration

React-JSS integrates one of the most popular css-in-js libraries, JSS, with React.

Setup

Here we will try to show the basics of how to get a theme going in react-jss.

Note: These are just examples, you can adapt them to work with your setup in however way you like and there is no 'single way' to work with style-genie.

You will want to have a theme object so you can eventually pass it into ThemeProvider

const theme = {
  palette: {
    primary: generateColor('hsl(200, 50%, 70%)'),
    background: generateColor('hsl(180, 50%, 10%)'),
    text: generateColor('#d8d8d8'),
  },
  breakpoint: generateBreakpoint(),
  spacing: generateSpacing(),
  transition: generateTransition(),
}

The ThemeProvider will simply accept the theme object we created above.

<ThemeProvider theme={theme}>
  <YourApp />
</ThemeProvider>

Which will make the theme available throughout your app. But before that we need to create the styles using createUseStyles.

const useStyles = createUseStyles(theme => ({
  component: {
    background: theme.palette.background.color,
    padding: theme.spacing(1),
    transition: theme.transition(['padding']),

    [`${theme.breakpoint.up.sm}`]: {
      padding: theme.spacing(4),
    },
  },
}))
`

We can then declare the component that will receive the styles. We call useTheme to get the current instance of the theme, then we pass it to the useStyles function we created above and then we are finally able to use the class inside the component.

const ReactJSSComponent = ({ ...props }) => {
  const theme = useTheme()
  const classes = useStyles({ ...props, theme })
  return <div {...props} className={classes.component} />
}

Typescript

To use typescript with react0jss you will want to create the typings for your theme and export it, or make it globally available if you want.

Style-genie exports all the types you will need for this. Most types are static, except Breakpoint which is generic and can accept an object type of signature { [key: string]: number } in case you are using custom breakpoints.

import { Color, Breakpoint, Spacing, Transition } from 'style-genie'

export interface CustomTheme {
  palette: {
    primary: Color
    background: Color
    text: Color
  }
  breakpoint: Breakpoint
  spacing: Spacing
  transition: Transition
}

You can, alternatively, generate the types from the theme object as follows.

export type CustomTheme = typeof theme

Then you have to pass the CustomTheme type into the createUseStyles function.

const useStyles = createUseStyles<CustomTheme, 'component'>(theme => ({
  component: {
    background: theme.palette. // now suggests 'primary' | 'background' | 'text'
  },
}))