Fluent UI v9 React Controls with transparent popups (background)
In a recent project, I encountered a strange issue with the Fluent UI v9 React Controls. The background from some control popups was transparent instead of filled. As an example, see the below image. The popup's background is transparent, as you can see. Fluent UI 9 popup with transparent background To solve this problem I found two possible solutions. Either you set the control property inlinePopup to "true," or you wrap your whole component in a IdPrefixProvider provided by the @fluentui/react-components package. The following code example demonstrates the using of the IdPrefixProvider. const element: React.ReactElement<IComponentPropsProps> = React.createElement( YourComponentClass, { your component properties } ); const fluentElement: React.ReactElement<ComponentProps> = React.createElement( FluentProvider, { theme: this._appMode === AppMode.Teams || this._appMode === AppMode.TeamsLocal ? this._is...