Continue using "styles" for component styling?

[gmantri]

On the Component Styling wiki page, following is mentioned:

WARNING: This page describes an older way of handling component styles in @fluentui/react 7/8 (and office-ui-fabric-react previously). As of late 2020, many existing components still use this approach, but new components should not. Until updated guidance is finalized, please talk to the team (or file an issue) about what pattern to use if you'd like to add a new component.

Does this mean we should not be using styles prop to style our components? What's the recommended approach if we were to make our components forward compatible with version 9?

Any insights into this would be highly appreciated.

[khmakoto]

Hi @gmantri, styling in v9 is very different from v7/v8. You can still use styles to style your components in v7/v8. For more information of v9 styling please visit this page.

Let me know if you need any more clarification.

[gmantri]

@khmakoto - Thanks. I looked at the link and all the examples make use of makeStyles. Is the general guideline is to use this instead of styles? Currently I am using version 8.72.2 and want to ensure that the path to upgrade to v9 would be as seamless as possible. Oh, and another question I have is will styles work in v9? Thanks for all your help.

[khmakoto]

makeStyles is the way to do things in v9. You could technically use it in v8 but there could be negative consequences of doing it like not being able to access v8 theming concepts or for it to clash with v8's styling system in unexpected ways.

In general, v9's styling is a clean break from v8 for performance and optimization purposes and I'd recommend keeping them separate. styles as a concept does not exist in v9 for example.

To be perfectly honest, given how different v8 and v9 are in terms of not only styling solutions, but overall DOM generated, I feel like a component by component upgrade approach is best in this case. The good news is that v9 is designed to be able to coexist with v8 for an iterative upgrade. You can learn more about that here.

Again, let me know if you have any further questions, happy to help.

[gmantri]

Thanks @khmakoto. Really appreciate your help.