Use substyled components with JSS

Follow these instructions if you want to use a substyled React component in a your web application and JSS is your css-in-js library of choice. Internally, substyle-jss uses css-jss, which is available since JSS monorepo version 10.

#### Why do you need this?

Substyled components usually carry some internal style definitions. Per default, these style definitions will be rendered as style attributes of the DOM elements. Inline styles have some limitations, though. For example, there is no support for :hover rules or media queries. Thus, you should let JSS process the inline styles to make sure you get the full user experience provided by the component.

$3

First, install substyle-jss:

``bash
npm install --save substyle-jss
`

Or, if using Yarn:

`bash
yarn add substyle-jss
`

$3

To let JSS process the internal style definitions of a substyled React component pass the result of viaJss() as the style prop to that component:

`javascript
import { viaJss } from 'substyle-jss'
;
`

$3

If you are rendering a larger number of different substyled components, it might become tedious to add the style={viaJss()} prop to all of them. Then you can render the StylesViaJss component somewhere close to the root element of your app. All substyled components will then automatically pass their internal style information to JSS for adding them to the sheet.

`javascript
import { StylesViaJss } from 'substyle-jss'
;


`

$3

You can pass an object of custom style definitions for all elements rendered by the substyled component. Custom styles are merged with the default styles and then processed written to the stylesheet via JSS.

`javascript
import { viaJss } from 'substyle-jss'
; style={viaJss({
element: {
fontSize: 12,
},
})}
/>
`

If you are using the StylesViaJss wrapping component, you can pass the object of custom style definitions directly via the style prop:

`javascript
import { StylesViaJss } from 'substyle-jss'
;
style={{
element: {
fontSize: 12,
},
}}
/>

``