@fluentui/react-theme-provider

@fluentui/react-theme-provider

React theming component and hook for Fluent UI React

Installation

yarn add @fluentui/react-theme-provider

Example usage

Use the theme with Fluent UI by wrapping content within the provider:

import { webLightTheme } from '@fluentui/react-theme';
import { ThemeProvider } from '@fluentui/react-theme-provider';

export const App = () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

You can also nest ThemeProviders:

import { webLightTheme, PartialTheme } from '@fluentui/react-theme';
import { ThemeProvider } from '@fluentui/react-theme-provider';

const headerTheme: PartialTheme = {
  /* your customizations */
};

export const App = () => (
  <ThemeProvider theme={webLightTheme}>
    <ThemeProvider theme={headerTheme}>
      <App />
    </ThemeProvider>

    <App />
  </ThemeProvider>
);

Accessing theme

useTheme

Theme can be accessed using useTheme hook.

import { useTheme } from '@fluentui/react-theme-provider';

const Content = () => {
  const theme = useTheme();
};

export const App = () => (
  <ThemeProvider>
    <Content />
  </ThemeProvider>
);