Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.25330
    CPU: (12) x64 Intel(R) Xeon(R) W-2235 CPU @ 3.80GHz
    Memory: 26.19 GB / 63.59 GB
  Browsers:
    Edge: Spartan (44.25330.1000.0), Chromium (112.0.1722.39)
    Internet Explorer: 11.0.25330.1000


- `@fluentui/react`: 8.107.1,
- `@fluentui/react-components`: 9.18.8
- `@fluentui/react-portal-compat`: 9.0.51
- `react`: 18.2.0

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/trusting-allen-tssvzy?file=/example.tsx

Bug Description

Actual Behavior

Fluent UI v9 components in a Fluent UI v8 <Panel /> should be styled properly.

Expected Behavior

Fluent UI v9 components in a Fluent UI v8 <Panel /> are not styled.

Cause

Fluent UI v9 is using useId() from React behind the scene if available, and useId() in React 18 does not ensure the ID appended to the prefix is numeral, while <PortalCompatProvider /> is looking for a numerical suffix while looking for the theme class name. Causing the lookup to fail, and the styles of v9 components not applied when in a v8 portal with the compatibility layer applied.

Logs

N/A

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.