Office Fabric UI I[component]StyleProp vs I[component]Styles interface use

Question

In the Office Fabric UI documentation every component has two interfaces, for example

https://developer.microsoft.com/en-us/fabric#/components/nav

has

INavStyleProps interface

and

INavStyles interface

a component implementing INavStyleProps can take in any of the listed props to customize style, for example

I am wondering if there is any way to interact with INavStyles classes exposed through the documentation; essentially what does implementing the INavStyles interface guarantee to the consumer of the component, other than the listed classes and styles are implemented. Is there a way to override, customize, or otherwise interact with the classes exposed through this interface similar to how we can use props to interact with components implementing INavStylesProps.

Answer 1

Here is link showing the use of both interfaces for Nav. It's a how we give to Nav the default styles.

In order to override the default styles for any INavStyles area, you can use the styles prop and pass to it a styleFunctionOrObject. As you can see from the first link provided, INavStyleProps are used to pass some values to be used in the styling of the parts of the Nav or booleans to have some conditional styling. Also, that is how we pass the theme to the styles.

A style function you can pass to styles prop would look exactly as the one we use to provide the default styles minus the getGloballClassNames. Also if you want to style just one area the return type should be Partial<INavStyles> as all areas are required and it will complain if you don't provides styles for all of them.

Let me know if this cleared the confusion on how to make use of both interfaces.