Accepted answer

actually, in jss documentation i found examples that show how to specify insertion points outside <head />.

together with ryan's comment pointing to material ui documentation i was able to achieve what i wanted.

jss supports two ways of specifying a custom insertion point for styles:

  1. by adding an html comment (e.g. <!-- custom-jss-insertion-point -->). this is only supported for insertion points in the <head>.

  2. by specifying an element (e.g. insertionpoint: document.getelementbyid("custom-jss-insertion-point")). this approach supports insertion points in the document body.

here's a working example of what is needed for the second approach:

index.html -- add an element that styles will be inserted after

      you need to enable javascript to run this app.
    <div id="custom-jss-insertion-point"></div>
    <div id="root"></div>

app.js -- tell jss about the custom insertion point

import react from "react";
import { create } from "jss";
import { stylesprovider, jsspreset } from "@material-ui/core/styles";
import button from "@material-ui/core/button";

const jss = create({
  // define a custom insertion point that jss will look for when injecting the styles into the dom.
  insertionpoint: document.getelementbyid("custom-jss-insertion-point")

export default function app() {
  return (
    <stylesprovider jss={jss}>
      <div classname="app">
        <button variant="contained" color="primary">

edit jss insertion point within body

this results in the styles being added as shown in the image below: enter image description here

if you render the insertion point element using react, you need to ensure that the element exists before you try to call document.getelementbyid("custom-jss-insertion-point") while configuring jss. if it is possible to do so, i would recommend rendering the insertion point element outside of react (as in the example) to avoid order-of-operations complications.

Related Query

More Query from same tag