問題タブ [office-fabric]

データを含むコールアウト (オフィス ファブリック UI) があります。データが多すぎる場合、吹き出し領域はスクロール可能です。ただし、同じ吹き出しコンポーネントのフッター/このデータの下にあるボタンを常に表示する必要があります。ボタンに「位置：絶対/固定」を追加しようとしました。それはその場にとどまりますが、スクロール可能な部分のデータは、表示されていなくてもボタンを「押し下げ」ます。画像を参照してください。

上記の「完了」ボタンには絶対/固定位置があることがわかります。常に表示されますが、スクロール可能であってもタグから出てきます。達成したい動作については、2 番目の図を参照してください。

コードを使用してサンドボックスで問題を再現しようとしました。完全に同じではありませんが、似ています: https://codesandbox.io/s/6v7m7mk8vz?fontsize=14

React で Office Fabric の Dropdown を使用しています。デフォルトで最初の要素を選択できるドロップダウンがたくさんありますが、この動作を望まないものもあります。デバッガーにブレークポイントを配置するonDropdownChange()と、ドロップダウンを初めてクリックしたときに呼び出されます。

イベントを Dropdown.base.js まで追跡することができました。そこで、このコードが表示されます。何も選択されていない場合、最初の要素に強制的にフォーカスされるようです。

これが私のドロップダウンレンダリングコードです:

これを回避する方法はありますか？他の人がオフィス ファブリックを使用していて、列オプション ペインを使用した VSO (これは私が自分のサイト用に構築しているものです) など、この動作をしていませんが、何をする必要があるか、または何らかの方法でカスタム処理されているかどうかはわかりません。それ。オプションとして空白のエントリを配置し、それを事前に選択することに関して、私がこれまでに持っている唯一のアイデア。最初のエントリを選択するだけでなく、コンボボックスのドロップダウンを初めてクリックすると、最初のオプションが選択されるだけで、ドロップダウンが開かれません。

Microsoft の Fabric UIのSeparatorコントロールのドキュメントでは、Separator はコンテンツを分離し、Separator 内のコンテンツを許可する一方で、いくつかのカスタマイズ オプションを許可する単純なコントロールです。

実際の区切り線の色を変更する方法はないようです。アプリの背景色が区切り線の色とほぼ同じであるため、これを行う必要があります。

ドキュメントで考えられるすべてのスタイリング ソリューションを試しました。プロパティで色、borderColor、outlineColorなどを設定してみましたstyles.root。プロパティのsemanticColors一部をthemeいじってみましたが、これまでのところ何も思いつきませんでした。

内部的には、行は:beforeテキストの前に作成され、それbackground-colorが色を決定するようです。しかし、これを変更する方法が見つかりません。

どうすればこれができるか知っている人はいますか？