Package Exports

@fluentui/react-theme-provider
@fluentui/react-theme-provider/lib-commonjs/themes/index
@fluentui/react-theme-provider/lib-commonjs/useGlobalClassNames
@fluentui/react-theme-provider/lib/themes/index
@fluentui/react-theme-provider/lib/useGlobalClassNames

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. If theme is not provided, default (Fluent) theme will be provided:

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

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

You can also customize your own theme:

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

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'
    }
  }
};

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

You can apply component-level styles:

import { Checkbox } from '@fluentui/react';
import { ThemeProvider, createTheme } from '@fluentui/react-theme-provider';

export const App = () => (
  <ThemeProvider
    theme={{
      components: { Checkbox: { styles: { root: { background: 'red' } } } },
    }}
  >
    <Checkbox />
  </ThemeProvider>
);

Create classes for React components based on theme

Themes can be accessed using the makeStyles hook. This hook abstracts rendering css given the theme object:

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

const useFooStyles = makeStyles(theme => ({
    root: {
      background: theme.semanticColors.bodyBackground,
      ':hover': {
        background: theme.semanticColors.bodyBackgroundHovered
    },
}));

const Foo = props => {
  const classes = useFooStyles();

  return <div className={classes.root} />;
};