Package Exports

@fluentui/react-theme-provider
@fluentui/react-theme-provider/lib-commonjs/compat
@fluentui/react-theme-provider/lib/compat

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

First, ensure you use an existing theme, or create your own. Example:

export const theme: Theme = {
  /* Provide any stylesheets which should come along with the theme */
  stylesheets: [
    '.className { ... }',
    ...
  ],

  /* Provide standard fluent tokens here. */
  tokens: {
    body: {
      fill: '#fafafa',
      text: '#333'
    }
  }
};

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

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

export const App = () => (
  <ThemeProvider theme={theme}>
    <>...app</>
  </ThemeProvider>
);

`ThemeProvider` api

The ThemeProvider component takes all default div html attributes, in addition to the following:

Prop name	Description
theme	The partial theme