react-fluentui-9 - Styles in Menu/Popovers missing

[ferreiraKeanu]

Disclaimer

Yes

Sample

react-fluentui-9

Contributor(s)

@techienickb

What happened?

Menus and Popovers have no styles, i have this issue in my main applications but can reproduce with just this example

Steps to reproduce

1. Clone Project
2. Change tenant url for gulp serve
3. run gulp serve
4. klick on splitbutton to open menu

Expected behavior

The Menus and Popovers should have a white background and and be styled.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

v18.18.0

What version of Node.js is required by the sample?

v18.18.0

Paste the results of SPFx doctor

CLI for Microsoft 365 SharePoint Framework doctor
Verifying configuration of your system for working with the SharePoint Framework

√ SharePoint Framework v1.17.2
× Node v18.18.0 found, v>=16.13.0 <17.0.0 required
× yo not found
× gulp-cli not found
× typescript v4.7.4 installed in the project
Recommended fixes:

• Install Node.js >=16.13.0 <17.0.0
• npm i -g yo@4
• npm i -g gulp-cli@2
• npm un typescript

Additional environment details

No response

[ferreiraKeanu]

The problem was that the FluentProvider did not set the css variables. solved with a headless version.
Not sure why it does not work in my case without manually setting the css.