如何强制Office UI结构ChoiceGroup水平对齐

Question

我正在尝试构建包含ChoiceGroup的SPFx webpart。当我设置的CSS样式ms-sm12的选择对齐垂直：

Show assigned to: 
o anyone 
* me 
o nobody 

我喜欢他们在一排对准水平：

Show assigned to: o anyone * me o nobody 

当我的样式设置为ms-sm6，它对齐它们“混合“： 的滑块和切换被设置为ms-sm3

Show assigned to: o anyone 
* me 
o nobody 

随着ms-sm4它看起来像：

随着ms-sm3，ms-sm2，ms-sm1它看起来像（标题让一列中越来越多的被压扁和所有选项：

我该如何强制/加密ourage选项要呈现水平？

Answer 1

按照以下的步骤：

1）新建.scss文件

例如：fabric.scss和粘贴此类。

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

2）在你的组件给喜欢refernece：

import './fabric.scss'; 

3）添加组件和应用类。

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