react-colorful
react-colorful copied to clipboard
react-colorful not working if we use it with react-shadow
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>
);
}
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.
CodeSandbox for the issue: HexColorPicker
with shadowroot .
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