Office UIファブリックチョイスグループを水平に揃える方法

Question

ChoiceGroupを含むSPFx webpartを作成しようとしています。私はms-sm12にCSSスタイルを設定すると選択肢が垂直に配向されています

Show assigned to: 
o anyone 
* me 
o nobody 

私は彼らが1行の水平整列するように：

Show assigned to: o anyone * me o nobody 

私はms-sm6にスタイルを設定すると、それは「彼らを揃えます混合」： スライダーとトグルはms-sm3

Show assigned to: o anyone 
* me 
o nobody 

に設定されています ms-sm4付き

ように見えます：

：それは（タイトル、より多くの押しつぶされた1列のすべてのオプションを取得するように見える ms-sm3で

、ms-sm2、ms-sm1

どのように強制/強制できますか水平にレンダリングするオプションをourageしますか？

Answer 1

以下の手順に従ってください：

1）新.scssファイル

EX作成：fabric.scssをし、その中にこのクラスを貼り付けます。コンポーネントを追加し、クラスを適用

import './fabric.scss'; 

3）：コンポーネントで

.inlineflex .ms-ChoiceField{ 
     display: inline-block; 
    } 

2）のようなreferneceを与えます。

<ChoiceGroup 
       className="inlineflex" 
       label='Pick one icon' 
       options={ [ 
       { 
        key: 'day',       
        text: 'Day' 
       }, 
       { 
        key: 'week',       
        text: 'Week' 
       }, 
       { 
        key: 'month',       
        text: 'Month'      
       } 
       ] } 
      />