How to change border colour in dropdown in fluent ui?

Question

<Dropdown/> has styles props. which expects IDropdownStyles.But not able to change border outline colour. I tried this,

root: {

    width: 300, color: "red", backgroundColor: "red", borderColor: "red",
    borderTopColor: "red",
    outlineColor: "red",
    borderRightColor: "red",


  },
  dropdown: {
    width: 300, color: "red", backgroundColor: "red", borderColor: "blue",
    borderTopColor: "red"
    , outlineColor: "red",
    borderRightColor: "red",
  },

But the colour is not reflected. Is any other way to achieve this?

Answer 1

Use title property inside styles:

<Dropdown
  ...
  styles={{
    title: {
      borderColor: 'red',
    }
  }}
/>

Codepen working example.