Back to Fluentui

@fluentui/react-theme-sass

packages/react-components/react-theme-sass/README.md

4.40.2-hotfix2963 B
Original Source

@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

  1. 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>,
);
  1. 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.️