Office UI Fabric React : Dropdown Component

Question

How to change the CSS of label for Dropdown? Markup is as below:

<Dropdown
      placeHolder="Select Department"
      label="Department:"
      id="Basicdrop1"
      ariaLabel="Department"
      options={[

        { key: 'A', text: 'Option a' },
        { key: 'B', text: 'Option b' },
        { key: 'C', text: 'Option c'},
        { key: 'D', text: 'Option d' },
        { key: 'E', text: 'Option e' },
      ]}
      onFocus={() =>console.log('onFocus called')}
      onBlur={() =>console.log('onBlur called')}
      componentRef={this._basicDropdown}
    />

I want to make "Department" label bold.

score 3 · Answer 1 · answered Oct 15 '18 at 17:31

You can style the label by using the styles prop on <Dropdown/>. Here is a code sample which renders the label as bold:

<Fabric.Dropdown
  placeHolder="Select Department"
  label="Department:"
  id="Basicdrop1"
  ariaLabel="Department"
  options={[

    { key: 'A', text: 'Option a' },
    { key: 'B', text: 'Option b' },
    { key: 'C', text: 'Option c'},
    { key: 'D', text: 'Option d' },
    { key: 'E', text: 'Option e' },
  ]}
  onFocus={() =>console.log('onFocus called')}
  onBlur={() =>console.log('onBlur called')}
  componentRef={this._basicDropdown}
  styles={{ label: { fontWeight: 'bold' }}}
/>

References

Office UI Fabric React : Dropdown Component

1 Answers1