Open vorth opened 1 year ago
Any proposal?
Same problem. can StyledEngineProvider provide an option to modify the location of the added style?
Could you put a link to the emotion/mui docs where it "fixes" this problem?
Here is the snippet I had in my React code, wrapping the main component element with a StylesProvider. This may not be very helpful, as I was still using MUI 4 and JSS, not Emotion.
import { StylesProvider, jssPreset } from '@material-ui/styles';
...
// We need JSS to inject styles on our shadow root, not on the document head.
// I found this solution here:
// https://stackoverflow.com/questions/51832583/react-components-material-ui-theme-not-scoped-locally-to-shadow-dom
const jss = create({
...jssPreset(),
insertionPoint: container
});
const reactElement = React.createElement( StylesProvider, { jss: jss }, [ viewerElement ] );
I'm porting a web component implementation from React (material-ui) to Solid JS. With MUI, I found a workaround to make JSS attach the style elements to the web component's shadow DOM rather than the document head. No such workaround seems possible for SUID:
https://github.com/swordev/suid/blob/fe83bfe5fddfe9fabe9e2f7368ccc289082f87ef/packages/css/src/dom/appendStyleElement.ts#L14
This means that only a single web component per page would function, at best... and it appears that styling is broken even in that case within the web component.