Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hamed-musallam opened this issue May 5, 2022 · 3 comments · May be fixed by #181
Open

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

hamed-musallam opened this issue May 5, 2022 · 3 comments · May be fixed by #181

Comments

@hamed-musallam
Copy link

hamed-musallam commented May 5, 2022 •
edited

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>
  );
}
@hamed-musallam hamed-musallam mentioned this issue May 5, 2022
Closed
@rschristian
Copy link
Contributor

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

react-colorful/src/hooks/useStyleSheet.ts

Lines 11 to 30 in a85e5b3

/**
* Injects CSS code into the document's <head>
*/
export const useStyleSheet = (nodeRef: RefObject<HTMLDivElement>): void => {
useIsomorphicLayoutEffect(() => {
const parentDocument = nodeRef.current ? nodeRef.current.ownerDocument : document;
if (typeof parentDocument !== "undefined" && !styleElementMap.has(parentDocument)) {
const styleElement = parentDocument.createElement("style");
styleElement.innerHTML = styles;
styleElementMap.set(parentDocument, styleElement);
// Conform to CSP rules by setting `nonce` attribute to the inline styles
const nonce = getNonce();
if (nonce) styleElement.setAttribute("nonce", nonce);
parentDocument.head.appendChild(styleElement);
}
}, []);
};

This just won't work with shadow DOM.

@definite2 definite2 linked a pull request Jun 5, 2022 that will close this issue
Open
@definite2
Copy link

CodeSandbox for the issue: HexColorPicker with shadowroot .

@blackforestboi
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix attaching styles, check shadowroot definite2/react-colorful
4 participants
@blackforestboi @rschristian @hamed-musallam @definite2