DatePicker styles not applying in PCF Control

[bkraemer-123]

I'm creating a PCF Control using React 9. It's for a model driven app. The styles for the control are not being applied properly. Compare the text field of the standard control on top with the PCF control below it. Additionally, the calendar component seems to be missing almost all styling.

The DatePicker-compat component is not installed when creating a pcf control, so I ran npm install @fluentui/react-datepicker-compat

I've wrapped the app in the FluentProvider

<FluentProvider theme={webLightTheme}>     
     <CustomDatePicker {...this.props}></CustomDatePicker>
</FluentProvider>  

These are library versions my ControlManifest is referencing.

<platform-library name="React" version="16.14.0" />
<platform-library name="Fluent" version="9.46.2" />

I know Fluent 9 only runs in React version 17 or higher, but according to the Microsoft docs, Fluent 17 is loaded when the PCF Control is loaded into a model driven app despite the library reference.

Any idea what's going on? Any help would be appreciated!

[khmakoto]

Can you check that you're not getting multiple versions of @fluentui/react-shared-contexts loaded in your bundle? This seems like an issue where the portal is reading theme values from a different context and this normally happens if there are duplicate versions in the bundle.

[bkraemer-123]

Thank you for your response!

This might be part of the problem. I checked the package-lock.json file. @fluentui/react-components was pointing to react-shared-contexts ^9.14.0 and everything else is ^9.21.2

I updated that line to point to ^9.21.2 - which didn't initially fix anything. Oddly, pointing the control manifest to Fluent 8.29.0 instead of Fluent 9.46.2 fixed most of the formatting issues. It's still not matching 100% to the styles in the model driven app, but it's closer.

Is there anywhere else I should be checking for version mismatches? I checked bundle.js and didn't see any duplicate references, but maybe I'm looking for the wrong thing.