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

Question

我正在Choice Group为我的单选按钮使用 Office 结构。我想将部分文本的样式更改为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回调中的in 是类型IChoiceGroupOptionProps并且可能有用，尽管定义整个内联渲染更容易。（https://docs.microsoft.com/en-us/javascript/api/office-ui-fabric-react/ichoicegroupoptionprops?view=office-ui-fabric-react-latest）