react-colorful not working if we use it with react-shadow

[hamed-musallam]

here is a sample of the code, I just embedded your HexColorPicker component under the root shadow

https://codesandbox.io/s/react-colorful-demo-forked-6vivtb?file=/src/App.js

import React, { useState } from "react";
import { HexColorPicker } from "react-colorful";
import root from "react-shadow/emotion";

export default function App() {
  const [color, setColor] = useState("#b32aa9");

  return (
    <root.div>
      <HexColorPicker color={color} onChange={setColor} />
    </root.div>
  );
}

[rschristian]

This is intended and a side-effect from how react-colorful distributes the CSS by injecting it directly into the head of the document:

https://github.com/omgovich/react-colorful/blob/a85e5b36b55cae7e95c73c8ecde0bc881e8e3b1f/src/hooks/useStyleSheet.ts#L11-L30

This just won't work with shadow DOM.

[definite2]

CodeSandbox for the issue: HexColorPicker with shadowroot .

[blackforestboi]

I fixed it by injecting the styles as global styles and I got it from here: https://github.com/omgovich/react-colorful/blob/master/src/css/styles.css