如何强制 Office UI Fabric 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 时，它们会对齐 "mixed"： Slider 和 Toggle 设置为 ms-sm3

Show assigned to: o anyone
* me
o nobody

ms-sm4 看起来像：

使用 ms-sm3、ms-sm2、ms-sm1 看起来像（标题越来越压扁，所有选项都在一列中：

如何强制/鼓励选项水平呈现？

Answer 1

按照以下步骤操作：

1) 创建新的 .scss 文件

例如：fabric.scss 并将此 class 粘贴到其中。

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

2) 在你的组件中给出像这样的引用：

  import  './fabric.scss';

3) 添加组件并应用 class.

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

Answer 2

另一个不需要添加 CSS 的选项是将样式直接应用于控件：

将 flexContainer 样式设置为 display:flex。

你会注意到选项末尾可能需要一个 space，我添加了一个不间断的 space 作为 \u00A0

<ChoiceGroup selectedKey={valueType}
styles={{ flexContainer: { display: "flex" } }} options={[
{ key: 'specific', text: 'selected\u00A0\u00A0' },
{ key: 'relative', text: 'relative' }]} />

完成！

Answer 3

将样式属性添加到 ChoiceGroup styles={{ flexContainer: { display: "flex" } }}
将样式属性添加到选项样式：{ choiceFieldWrapper: { display: 'inline-block', margin: '0 0 0 10px' }}

完成！

Answer 4

const options: IChoiceGroupOption[] = [
      { key: 'conforme', text: 'Conforme'},
      { key: 'noConforme', text: 'No conforme', styles:{field: { marginLeft: "15px"}}}
    ];
<ChoiceGroup styles={{ flexContainer: { display: "flex" } }}  options={options}  />

如何强制 Office UI Fabric ChoiceGroup 水平对齐

How to force Office UI Fabric ChoiceGroup to align horizontal

css

typescript

office-js

spfx