@fluentui/react-theme-sass

React Theme Sass for Fluent UI React

SASS variables referencing react-theme design tokens injected to DOM by react-provider.

Usage

Instantiate a FluentProvider to inject a Fluent theme into a DOM:

jsx

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';
import App from './App';

ReactDOMClient.createRoot(document.getElementById('root')).render(
  <FluentProvider theme={teamsLightTheme}>
    <App />
  </FluentProvider>,
);

In SCSS styles you can import SCSS variables from @fluentui/react-theme-sass and use them in the styles:

scss

@import '@fluentui/react-theme-sass';

.brandedElement {
  color: $colorBrandForeground1;
  background: $colorBrandBackground;
  border-radius: $borderRadiusLarge;
}

⚠ Note: This package does not export any Javascript code.️