Is it possible to change a part of text styling of ChoiceGroupOption (office-ui-fabric)?

user_11986572 0
Viewed 1552

I am using Office fabric Choice Group for my radio buttons. I would like to change the styling of part of text to bold, but the rest of text remains as normal font size. I am using onRenderField method but I have not successfully implemented yet.... I really appreciate any inputs!!

Final Goal for radio button text:

On: some additional explanation here

Example Code using onRenderField method:

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

The above code makes bold entire text like below:

On: some additional explanation here

office-ui-fabric-react office-ui-fabric reactjs
1 Answers

There's an option that doesn't appear to be well-documented called onRenderLabel that will do what you need.

Using it looks like:

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

The p in the callback is of type IChoiceGroupOptionProps and may be of use, though it's more likely that defining the entire render inline is easier. ( https://docs.microsoft.com/en-us/javascript/api/office-ui-fabric-react/ichoicegroupoptionprops?view=office-ui-fabric-react-latest )

user_136685120
Related