Как я могу изменить стили параметров, когда они динамически получают параметры в ChoiceGroup? - PullRequest
Новая
       6

Как я могу изменить стили параметров, когда они динамически получают параметры в ChoiceGroup?

0 голосов
/ 11 февраля 2019

Я пытаюсь создать группу выбора с динамическими параметрами.Также мне нужно изменить стили каждого варианта.Я пробовал это с использованием имени класса, но это не было успехом. Может ли какая-нибудь помощь для этого? 

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}/>

1 Ответ

0 голосов
/ 14 февраля 2019

В следующем примере показано, как сгенерировать данные 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 мы переопределяем стили

Вот демоверсия для вашей справки

Следуйте Component Styling для всестороннего руководства о том, как стилизовать компоненты в Fabric

...