FluentUI React v9 コンボボックス - コンポーネントの幅を設定できません

Question

Fluent UI Combobox コンポーネント (@fluentui/react-components) の幅を指定する方法はありますか?

他の入力要素については、style={{width: "123px"}} 設定を使用できます (ただし、これが推奨される方法かどうかはわかりません)。 Combobox を使用して作業します。 < /p>

Answer 1

style={{width: "123px"}} は、コンボボックスのルート要素の min-width が 250px に固定されているため、機能しません。

したがって、達成したい内容に応じて、コンボボックスの幅を変更します。

ただ大きくしたい場合は、この最小幅を大きくするだけです:

リーリー

特定の幅に設定したい場合は、ルート要素の min-width の設定を解除してから、基礎となる入力要素の幅を設定します (この場合、コンボボックスの最終的な幅は 20 ピクセルより大きくなります。入力パディングとドロップダウン ボタンの) ：

リーリー

編集: style-Prop を使用する代わりに、css クラスを使用することもできます (私の意見では、よりクリーンな方法です):

リーリー