如何使用 Fluent UI 和 React JS 将自定义样式应用于选择组的选项

如何解决如何使用 Fluent UI 和 React JS 将自定义样式应用于选择组的选项

import {IChoiceGroupOptionStyleProps,IChoiceGroupOptionStyles} from '@fluentui/react'

const choiceGroupStyles: IStyleFunctionorObject<IChoiceGroupOptionStyleProps,IChoiceGroupOptionStyles> = (styleProps:IChoiceGroupOptionStyleProps): IChoiceGroupOptionStyles => {

   const chkStyles : IChoiceGroupOptionStyles = {
      field: [
         {color: "red"},styleProps.disabled && { 
            color: "green" 
         }
      ]
   };
   
   return chkStyles

}


const options: IChoiceGroupOption[] = [
  {key: "A",text: "Option A",disabled:true,styles:{choiceGroupStyles}},{key: "B",text: "Option B",{key: "C",text: "Option C",{key: "D",text: "Option D",]


<div>

<ChoiceGroup defaultSelectedKey = "B" options={options} label="Pick One" />

</div>

我想在正常情况下以及在禁用选项时为 ChoiceGroup 的选项添加颜色。有些我无法添加这种“choiceGroupStyles”样式的选项，这引发了一些错误。

错误如下

在这方面需要一些帮助，因为我需要在使用 Fluent UI 和 React JS 的 ChoiceGroup 中禁用选项时将颜色应用于选项。