Modern hooks way to pass dynamic styles into components, with additional props isTeams.

[mishabutuzov]

Hi,

We are trying to find the best solution for connecting styles.
All of our components require the {isTeams: boolean} flag, and it gets thrown everywhere.
Based on the flag value and the current theme, styles are dynamically built.

This HOC approach is taken from the Fluent component library and works like clockwork, typing works, everything is separated into files.

But syntax sugar is too much.
We are looking for an analog functionality HOOK style solution.

Lately, I find connecting styles with hooks, no { isTeams } flag.
I feel that you need to switch to HOOK's approach, but since.
Do you have a ready solution?

### Details:
Now the style connection looks like this, and it's a lot of code:

const AppStyled: React.FunctionComponent<IRootAppProps> = styled<IRootAppProps, IAppStyleProps, IAppStyles>(
    AppBase,
    getStyles,
    undefined,
    {
        scope: 'AppRoot',
    },
);

const App: React.FunctionComponent = () => {
    const {theme} = useAppSelector(nnSelector).activeTheme

    return <ThemeProvider theme={theme} className={rootStyles.root}>
        <AppStyled title={"Name"}/>
    </ThemeProvider>;
};

export default App;

Type declarations.
The important part with isTeams that needs to be kept:

// App common props
import {IStackItemStyles, IStyleFunctionOrObject, ITheme} from '@fluentui/react';

export interface IRootAppProps {
    title: string;
    theme?: ITheme;
    styles?: IStyleFunctionOrObject<IAppStyleProps, IAppStyles>;
};

export declare type IAppStyleProps = Pick<IRootAppProps, 'theme'> & {
    isTeams?: boolean;
};


export interface IAppStyles {
    contentStackItem: Partial<IStackItemStyles>;
}

Fluent UI version: "@fluentui/react": "8.96.0",

Thanks a lot.

[ling1726]

Thanks for the question @mishabutuzov , unfortunately, this is a limitation of Fluent v8. If you upgrade to Fluhttps://react.fluentui.dev/?path=/docs/concepts-developer-styling-components--pageent UI v9, hooks are the preferred way of styling