Question

我正在尝试使用动态选项创建选择组。我还需要更改每个选项的样式。我尝试使用类名进行尝试，但未成功。对此可以帮忙吗？

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

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

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-选项容器的默认类名，通过selectors属性，我们覆盖样式

Here is a demo供参考

遵循Component Styling获取有关如何在Fabric中设置组件样式的全面指南

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

1 个答案: