⚙️
SharePoint Framework で Fluent UI React v9 を使うときの注意点
SharePoint Framework で Web パーツを作成する場合、既定の UI ライブラリは v8（@fluentui/react）です。しかし、v9（@fluentui/react-components）の利用を検討する方も多いでしょう。SharePoint のページには複数の Web パーツを追加できます。それぞれの Web パーツで FluentProvider を定義すると、名前の競合が発生します。問題が発生しない場合でも、ブラウザーのコンソールに次のエラーが表示されます。
There are conflicting ids in your DOM. Please make sure that you configured your application properly.
この問題を回避するには、IdPrefixProvider を追加する必要があります。
この設定をすることで、CSS クラス名にアプリ固有のプレフィックスを付与でき、Web パーツ間での競合を防止できます。
Discussion