How do i configure makeStyles hook in material-ui with a custom jss insertion point?

Question

I have a react component which i have wrapped & released as a web component. However all style-sheets created using makeStyles hook are not getting applied as the are inserted into the head section of the browser DOM. Is there a way for me to configure the makeStyles hook and supply the shadowRoot as a the insertion point for the jss??

Answer 1

import React from "react";
import ReactDOM from "react-dom";

import { create as createJss } from "jss";
import preset from "jss-preset-default";
import { StylesProvider, jssPreset } from "@material-ui/styles";

import Content from "./Content";

const jss = createJss();
jss.setup({
  ...jssPreset(),
  insertionPoint: document.getElementById("jss-insertion-point")
});
    
function App() {
  return (
    <JssProvider jss={jss}>
      <Content />
    </JssProvider>
    <div id="jss-insertion-point"></div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Also see https://codesandbox.io/s/61qjy83qzz?file=/src/index.js:0-739 by Robin Ednam Also https://github.com/cssinjs/jss/issues/466 Your component or main app component should be wrapped in Got this done and working to Jitsi app now