Unable to style nav link on hover

[noneall]

I try to style the anchor tag on hover in Nav component but its impossible to override the default style. INavStyles does not have any prop to support hover case.

export const navStyle: Partial<INavStyles> = { chevronButton: { color: theme.palette.white, }, link: [ { color: theme.palette.white, }, 'nav-link', ], compositeLink: { '&:hover': { color: 'red', '.nav-link': { backgroundColor: 'blue', }, }, }, }

#office-ui-fabric, #fluentui-react, #fluentui

[ecraig12345]

You can do this using a .ms-Nav-compositeLink:hover selector within styles.link:

const styles: Partial<INavStyles> = {
  link: {
    '.ms-Nav-compositeLink:hover &': {
      backgroundColor: 'purple' // your real styling here
    }
  }
};

Here's a live demo: https://codepen.io/ecraig12345/pen/abZjZme