How to use global styles with this module

[kkorada]

Hi, In my app we are using styled components, fontawsome and some global styles. fontawsome and global styles are being attached to head. Is there any way I can attach them inside shadow root ?

For global css imports I tried configuring with style-loader insert option but it requires shadow root to be available before hand.

Can the styleSheets prop on root be helpful in this case ? How to use this prop ?

[kkorada]

any update ?

[nirtamir2]

Hi @kkorada I had the same issue and I solved it with:

const sheet = new CSSStyleSheet();
sheet.addRule("*", `box-sizing: border-box`);
const styleSheets = [sheet];

export function Root() {
  return (
    <root.div styleSheets={styleSheets}>
      <App />
    </root.div>
  );
}

I don't know if it's the best way to handle it - if someone finds a more elegant way I will be happy to hear.

Update:

I notice that Firefox does not support the CSSStyleSheet constructor. So I found a better way (css is imported with @emotion/react):

      <root.div>
        <style>
          {
            css`* {
              box-sizing: border-box;
            }`.styles
          }
        </style>
        <InnerApp {...props} />
      </root.div>

Those styles are accessible for all the styles inside the root.

[husayt]

Also, one could use a polyfill for CSSStyleSheet https://github.com/calebdwilliams/construct-style-sheets