在ChoiceGroup中动态获取选项时如何更改选项样式？

Question

我正在尝试创建带有动态选项的选择组。我还需要更改每个选项的样式。我尝试使用类名，但它不是 success.Can 有人对此有帮助吗？

let numbers = [];
for(let i=0;i<10;i++){
    numbers.push({
        key:i,text:i,checked: false
    });
}

<ChoiceGroup className="numbers" key="numbers" options={numbers} onChanged={this.onRecentMatterChanged}/>

Answer 1

以下示例演示了如何为 ChoiceGroup 组件生成 options 数据并通过 ChoiceGroup.styles 属性自定义选项样式：

const generateOptions = (count: number): IChoiceGroupOption[] => {
  return Array.from(Array(count), (_, i) => {
    return {
      key: i.toString(),
      text: `Option ${i}`,
      checked: false
    };
  });
};

export default class ChoiceGroupBasicExample extends React.Component<{}, {}> {
  private options: any[];
  constructor(props: {}) {
    super(props);
    this.options = generateOptions(10);
  }

  public render() {
    return (
      <div>
        <ChoiceGroup
          className="defaultChoiceGroup"
          defaultSelectedKey="4"
          options={this.options}
          label="Pick one"
          required={true}
          styles={{
            flexContainer: [
              {
                backgroundColor: "#ADD8E6",
                selectors: {
                  ".ms-ChoiceField": {
                    color: "#00008B",
                    fontWeight: 600
                  }
                }
              }
            ]
          }}
        />
      </div>
    );
  }
}

详情：

flexContainer - 选项的容器名称
ms-ChoiceField - default class 选项容器的名称，通过 selectors 属性我们覆盖样式

Here is a demo供大家参考

关注 Component Styling 获取有关如何在 Fabric 中设置组件样式的综合指南

在ChoiceGroup中动态获取选项时如何更改选项样式？

How can I change option styles when get the options dynamically in ChoiceGroup?

reactjs

office-ui-fabric