iTranslated by AI
The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
⚙️
Considerations for Using Fluent UI React v9 in SharePoint Framework
When creating web parts with the SharePoint Framework (SPFx), the default UI library is v8 (@fluentui/react). However, many developers are considering using v9 (@fluentui/react-components). You can add multiple web parts to a SharePoint page. If you define a FluentProvider in each web part, name collisions will occur. Even if there are no apparent functional issues, the following error will appear in the browser console:
There are conflicting ids in your DOM. Please make sure that you configured your application properly.
To avoid this issue, you need to add an IdPrefixProvider.
By configuring this, you can assign an application-specific prefix to CSS class names, which prevents conflicts between web parts.
Discussion