[RSP] Components cannot read CSS vars when rendered inside a portal

[eduardo-vargas]

🐛 Bug Report

If V3 components are rendered using ReactDOM.createPortal, the components don't seem to be able to access the CSS variables.

🤔 Expected Behavior

Components should look and feel the same whether they were rendered using ReactDOM.render or ReactDOM.createPortal

😯 Current Behavior

Components are rendered using browser default styling instead, see codesandbox example

💁 Possible Solution

Not 100% sure :/

🔦 Context

We were trying to render an RSP v3 component within another part of the website that is outside of our react environment / component tree.

💻 Code Sample

codesandbox example

🌍 Your Environment

Software	Version(s)
react-spectrum	3.8.0
Browser	Chrome Version 89.0.4389.82 (Official Build) (x86_64)
Operating System	MacOS Big Sur 11.1

🧢 Your Company/Team

Adobe / Commerce Cloud

🕷 Tracking Issue (optional)

[devongovett]

It should work if you nest a Provider inside your portal I think?

[eduardo-vargas]

unfortunately it doesnt :( that was the third example of the codesandbox / screenshot above

[so99ynoodles]

It seems like Provider inside the portal doesn't render ProviderWrapper.

if (!prevContext || props.locale || theme !== prevContext.theme || colorScheme !== prevContext.colorScheme || scale !== prevContext.scale || Object.keys(domProps).length > 0 || otherProps.UNSAFE_className || Object.keys(styleProps.style).length > 0) {
    contents = (
      <ProviderWrapper {...props} UNSAFE_style={{isolation: !prevContext ? 'isolate' : undefined, ...styleProps.style}} ref={ref}>
        {contents}
      </ProviderWrapper>
    );
  }

As you can see, changing the theme of lower-level Provider will work properly.

Possible solutions might be like:

• Add props like isPortal to Provider so it could render ProviderWrapper.
• Inject CSS variables ProviderWrapper has to body tag.

[snowystinger]

isPortal (name pending) seems like a good way to go

[dannify]

Out of curiosity @evargast, if you add an arbitrary prop to Provider such as data-test-id="foo", does it solve your problem?

[dsmmcken]

Out of curiosity @evargast, if you add an arbitrary prop to Provider such as data-test-id="foo", does it solve your problem?

Old thread, but looks like isPortal PR stalled. I can confirm that adding an arbitrary data-prop does trigger the expected output. Wrapping the Provider with a component that accepts isPortal to set a useId as a unique prop on the Provider is an okay work-around.

[snowystinger]

Closing as there is an acceptable workaround which is very close to the proposed PR. You can specify data-isPortal on the Provider.