⚙️
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