How to use jss insertion point with gatsby?

[hackhat]

I'm trying to follow this tutorial https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-dom-insertion-point because when I override some material ui properties doesn't work and this tutorial fixes it.

The problem is that I need to do

const insertionElement = document.getElementById('jss-css-insertion-point')
jss.setup({
  // https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-dom-insertion-point
  insertionPoint: insertionElement || undefined,
})

and obviously fails when gatsby builds.

[sidharthachatterjee]

Are you using gatsby-plugin-jss?

https://www.gatsbyjs.org/packages/gatsby-plugin-jss/

[hackhat]

No, because I can't understand what exactly is doing by reading the docs. Also doesn't look like there is any way to specify the insertion point.

I fixed by using @wapps/gatsby-plugin-material-ui, but I'm not happy as it's doing some magic I don't really know. But it works for now...

[sidharthachatterjee]

@hackhat The gatsby-plugin-jss plugin uses react-jss (which exports a ThemeProvider)

On the server, styles are added at an element called server-side-jss and on the client a ThemeProvider element is added to wrap everything.

The insertionPoint looks useful for manual setup (which might not be necessary if one uses the plugin above).

[hackhat]

Thanks for clarifing.