MUI v5 stylesheets custom mount point

user_1031652 0
Viewed 139

I'm trying to use Shadow Dom inside of chrome extension. If I wrap my app in Shadow Dom it doesn't have mui styles (they are added to head - which is not available inside of Shadow Dom).

I want to somehow point where mui css styles should be mounted.

All information I can find online is from previous version and doesn't seem to work.

shadow-dom material-ui reactjs
1 Answers

MUI use @emotion library for writing CSS styles with JavaScript. MUI inject all styles in head so you have to inject those styles in targeted element in Shadow Dom instead of head.

Install @emotion/cache and @emotion/react for injecting MUI styles into target element.

Code example:

import React from 'react';
import App from './App.jsx';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

function AppContainer() {
    let cashCache = createCache({
        key: 'shadow-dom-css',
        prepend: true,
        container: document
            .getElementById('shadow-dom-root')
            .shadowRoot.querySelector('#emotion-styled-container'),
        speedy: false,
    });
    
    return (
        <CacheProvider value={cashCache}>
            <App />
        </CacheProvider>
    );
}

export default AppContainer;

For more info: https://mui.com/material-ui/guides/shadow-dom/

user_113868020
Related