Fluent UI React Component Theming and Styling

[persistentant]

Environment Information

• Package version(s): "@fluentui/react": "8.98.5",
• Browser and OS versions: (fill this out if relevant)

Describe the issue:

We are using Fluent UI React V8 and wonder which component theming/styling guidance we should follow. From Component Styling, it looks using styles prop for Fluent UI components and className for custom components are going to be deprecated.

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.

Questions:

1. Is the styles prop/className guidance going to be deprecated? If this is true, is there any new guidance to follow?
2. If the new guidance is not ready yet, when do we expect it to be ready, and before that should we still follow the styles/className for now?
3. Specially, we want to use ThemeProvider as recommended for theming. Although we tested that ThemeProvider works fine together with the styled function from Fluent UI which provides theme through this.props.theme, is this the recommended approach? I am asking as it is not clear to me whether the styled function will still be supported.

Actual behavior:

Expected behavior:

If applicable, please provide a codepen repro:

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: Blocking

Products/sites affected: (if applicable)

[ling1726]

@zhongjp58 converting this to a discussion since this isn't really an issue but a support question.

The most recent way to override styles in v8 is to use mergeStyles https://github.com/microsoft/fluentui/blob/master/packages/merge-styles/README.md

You can find more concrete examples of its usage in the Fluent repo in the react-examples package https://github.com/microsoft/fluentui/blob/master/packages/react-examples/src/react/DetailsList/DetailsList.Basic.Example.tsx