'React Fluent UI Northstar Theming Primary Buttons

I use Fluent UI NorthStar Provider for theming with the base teamsTheme and a custom one for tweaking colors. I can change the colors of the buttons but I don't find a way of changing the colors also for the buttons when they are marked as primary. Can someone Help me here?

On my custom theme file:

export default {
    siteVariables: {
        colors: {
            brand: {
                50: '#e8f7f4',
                100: '#d1f0ea',
                200: '#a3e1d4',
                300: '#8dd9ca',
                400: '#76d1bf',
                450: '#76d1bf',
                500: '#48c2a9',
                600: '#1ab394',
                700: '#1ab394',
                800: '#158f76',
                900: '#08362c',
                1000: '#03120f',
            },
            white: '#FFF',
        },
    },
    componentVariables: {
        // Button: {
        //     borderRadius: '4px',
        //     color: '#ffffff',
        //     backgroundColor: '#1ab394',
        // }
        Button: ({ colorScheme }) => ({
            backgroundColor: '#1ab394',
            color: '#ffffff',
        }),
    },
};

On my App:

...
<Provider theme={mergeThemes(teamsTheme, customTheme)}>
  ...
</Provider>
...

On one of my screens:

...
<Button primary content={Strings.en.onBoardingScreen.button} onClick={onClick} />
...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React Fluent UI Northstar Theming Primary Buttons

Sources

Related Questions