是否可以更改 ChoiceGroupOption (office-ui-fabric) 的部分文本样式？

Question

我正在为我的单选按钮使用 Office 结构 Choice Group。我想将部分文本的样式更改为bold，但其余文本保持正常字体大小。我正在使用onRenderField 方法，但我还没有成功实现......我非常感谢任何输入！

单选按钮文本的最终目标：

开启：这里有一些补充说明

使用onRenderField方法的示例代码：

options={[
  {
    key: 'On', 
    text: 'On: some additional explanation here', 
    onRenderField: (props, render) => {
      return (
        <span style={{fontWeight: 'bold'}}>
          {render!(props)}
        </span>
      );
    }
  }
]}

上面的代码使bold整个text如下：

开启：这里有一些补充说明

Answer 1

有一个选项似乎没有很好的记录，称为onRenderLabel，可以满足您的需要。

使用它看起来像：

{
  key: 'C',
  text: 'Option C',
  onRenderLabel: (p) => <span id={p.labelId} className="ms-ChoiceFieldLabel">Option C: only <strong>this part</strong> is bold</span>
}

回调中的p 是IChoiceGroupOptionProps 类型并且可能有用，尽管定义整个内联渲染更容易。 (https://docs.microsoft.com/en-us/javascript/api/office-ui-fabric-react/ichoicegroupoptionprops?view=office-ui-fabric-react-latest)