Dropdown component - set on hover color

[jbk75]

Hi,
how can I change the hover background color when I go over the items in a dropdown?

[spmonahan]

Hello @jbk75 ,

You didn't mention if you're using Fluent v8 or v9 so I've got answers for both :)

Fluent v8

You can use the styles prop to provide custom style overrides to Dropdown and other components in Fluent UI v8.

Here's an Codepen example that makes the v8 Dropdown option background hotpink when hovered.

The IDropdownStyles interface under the Implementation section of the Dropdown docs provides more details.

Fluent v9

In Fluent UI v9 you can use makeStyles to supply a className to the Option component.

Here's an Codesandbox example that makes the v9 Dropdpwn Option background hotpink when hovered

Here's a guide on getting started styling v9 components.