Package Exports

@fluentui/react-theme-provider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-theme-provider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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>
);