How to apply a specific theme to fluent ui control?

Question

I am developing a spfx solution in which a specific theme to be applied to a office ui fabric control.

Answer 1

use Customizer component provided by Office UI fabric and send the theme object created using Create theme function to it in the settings object.

const myTheme = createTheme({
    palette: {
        themePrimary: '#ee6f67',
        themeLighterAlt: '#fef9f8',
        themeLighter: '#fce7e5',
        themeLight: '#fad2cf',
        themeTertiary: '#f4a6a1',
        themeSecondary: '#ef7f77',
        themeDarkAlt: '#d5645c',
        themeDark: '#b4544e',
        themeDarker: '#853e39',
        neutralLighterAlt: '#faf9f8',
        neutralLighter: '#f3f2f1',
        neutralLight: '#edebe9',
        neutralQuaternaryAlt: '#e1dfdd',
        neutralQuaternary: '#d0d0d0',
        neutralTertiaryAlt: '#c8c6c4',
        neutralTertiary: '#a19f9d',
        neutralSecondary: '#605e5c',
        neutralPrimaryAlt: '#3b3a39',
        neutralPrimary: '#323130',
        neutralDark: '#201f1e',
        black: '#000000',
        white: '#ffffff',
    }
});

        <Customizer settings={{ theme: myTheme }}>
        {office ui fabric controls}
        </Customizer>