[Bug]: @fluentui/react-datepicker-compat and @fluentui/react-timepicker-compat css are broken

[rianfloo]

Library

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

System Info

System:
    OS: macOS 14.4
    CPU: (8) x64 Apple M1
    Memory: 36.05 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 124.0.6367.94
    Safari: 17.4

Are you reporting Accessibility issue?

None

Reproduction

Create an add-in with the react boilerplate, add datepicker dependency

Bug Description

Hello :)

Actual Behavior

I've been using react-components inside a Microsoft add-in. Everything is working perfect except for two components :

@fluentui/react-datepicker-compat and @fluentui/react-timepicker-compat

Show attached screenshots :

Style is not applying (not defined)

Expected Behavior

The selectors should be styled.

I am using following dependencies

PS : All other components working fine

"@fluentui/react-components": "^9.30.4",
"@fluentui/react-datepicker-compat": "^0.4.33",
"@fluentui/react-icons": "^2.0.235",
"@fluentui/react-timepicker-compat": "^0.2.10",

Feel free to ask me if you need more info.

Thanks a lot :)

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

[khmakoto]

@rianfloo can you check your .lock file and see if you have multiple versions of @fluentui/react-shared-contexts in there? If you do, can you try deduplicating them and checking if that fixes this issue?

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

[LastGunslinger]

@rianfloo I was having the exact same issue until I realized that on my FluentProvider I had forgotten to set a theme. After adding one of the provided ones this issue went away. Not sure why styling for most other things works without providing a theme, but that is usually the solution when you see that those global CSS variables are not set.