0

I am using FluentUI components for developing Teams App. And have a form where I need to mark some Input and FormDropdown fields as required. On adding required flag, the required fields sign (*) comes up beside the field label in default i.e black color. I want to restyle this asterisk sign and change the color of the sign to red. Any suggestions on how to achieve this.

Naina
  • 63
  • 6

1 Answers1

0

You can use subComponentStyles property inside styles to modify styles of Label component:

<TextField
  label="Required "
  required={true}
  styles={{
    subComponentStyles: {
      label: {
        root: {
          ':after': {
             position: 'absolute',
             content: `'@'`,
             color: 'green'
          }
        },
      },
    },
  }}
/>

ComboBox

<ComboBox
   label="Foo"
   required={true}
   styles={{
     label: {
       ':after': {
          position: 'absolute',
          content: `'@'`,
          color: 'green',
        },
     },
   }}
/>

Approach is the same for Dropdown component.

Codepen working example.

Label Component implementation.

TextField areaLabel implementation.

Marko Savic
  • 2,159
  • 2
  • 14
  • 27
  • I use same code ComboBox but get Typescript error Type '{ subComponentStyles: { label: { root: { ':after': { position: string; content: string; color: string; fontSize: string; }; }; }; }; }' is not assignable to type 'Partial' – Ofer Gal Jul 12 '23 at 08:43
  • @OferGal `ComboBox` has different approach. Check answer. – Marko Savic Jul 12 '23 at 13:56