Styled components and react portals

Environment

npx envinfo --system --binaries --npmPackages styled-components,babel-plugin-styled-components --markdown --clipboard

System:

• OS: Windows 10
• CPU: (4) x64 Intel® Core™ i7-3520M CPU @ 2.90GHz
• Memory: 5.55 GB / 15.70 GB

Binaries:

• Node: 10.7.0 - C:\Program Files\nodejs\node.EXE
• Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
• npm: 6.2.0 - C:\Users\Jannes\node_modules.bin\npm.CMD

Reproduction

https://codesandbox.io/s/styled-components-qvg50

Steps to reproduce

Use a portal (or some library that uses a portal internally) with styled components. Try to style a component that refers to a parent/child when the other one is in the portal.

Expected Behavior

Styles are not applied. Styled only work along the real dom-tree, not the react dom-tree. In particular, with a 3rd party library that uses a portal somewhere invisible, under the hood, this is very confusing.

Actual Behavior

EITHER styled should be applied (just like events are propagated through portals) and this is a bug. OR this is a known limitation documented somewhere because tracking the css inheritance across the react render-tree is not feasible. (If it’s somewhere in the docs or the github-issues, sorry I couldn’t find it, spend a couple of hours searching!)

[jtiagodev]

If you wish to continue using Portals let me share the solution for this issue: In essence, what you do here is inject the generated CSS class from styled-components directly into portalClassName, enabling you to style your Tooltip content div.

[Zyclotrop-j]

Consider the following example:

const StyledPopOver1 = styled(PopOver1)``; // PopOver1 from lib A
const StyledPopOver2 = styled(PopOver2)``; // PopOver2 from lib B
const StyledTitle = styled.div` ${StyledPopOver1} & { color: red; } ${StyledPopOver2} & { color: red; } `;
....
<Popover1>
  <StyledTitle />
</Popover1>
<Popover2>
  <StyledTitle />
</Popover2>

If you look at it, you’d assume that both StyledTitle are red. But in my case, I stumbled upon this and one was red, the other one was not: lib A was using a portal, lib B wasn’t. As a user of the library (all three, lib A, lib B and styled components), I’d have expected both cases to work equally. Using other forms of inheritance, like the context-API worked in both cases. But not in this case. I tried to look at the DOM-tree, but it proved to be very difficult because the nodes in question would only be mounted on hover. So I started searching for limitations with styled components, but couldn’t find any documented either. I finally stumbled upon a portal-like-use in lib A. That was, what raised my suspicion, but even after researching, I couldn’t find a clue on whether styled-components would work across DOM-portals, or whether it internally relied on pure css-inheritance. Turns out, it is the second. This is why I created the test-case in the Reproduction-section.

By what you, @d7my11, are saying, I take the behaviour works as designed, and styled-components is limited to the natural DOM for all styling and inheritance and does not take the react-dom into account. If that limitation had been documented, I’d have had a quick idea, what could have been the source of the issue described above; it would also make everyone who uses styled-components with portals or other libraries aware of this limitation. In short: I believe listing this limitation somewhere in the docs together with the implication on portals would help users of the library find out and understand why their code might not be working.