@fluentui/style-utilities

What is @fluentui/style-utilities?

@fluentui/style-utilities is a utility library for styling in the Fluent UI ecosystem. It provides a set of functions and utilities to help with theming, styling, and responsive design in React applications.

What are @fluentui/style-utilities's main functionalities?

Theming

Theming allows you to create a consistent look and feel across your application by defining a set of colors and styles. The `createTheme` function helps you generate a theme object that can be used throughout your application.

const { createTheme } = require('@fluentui/style-utilities');

const myTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
    themeLighterAlt: '#eff6fc',
    themeLighter: '#deecf9',
    themeLight: '#c7e0f4',
    themeTertiary: '#71afe5',
    themeSecondary: '#2b88d8',
    themeDarkAlt: '#106ebe',
    themeDark: '#005a9e',
    themeDarker: '#004578',
    neutralLighterAlt: '#f8f8f8',
    neutralLighter: '#f4f4f4',
    neutralLight: '#eaeaea',
    neutralQuaternaryAlt: '#dadada',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c8c8',
    neutralTertiary: '#c2c2c2',
    neutralSecondary: '#858585',
    neutralPrimaryAlt: '#4b4b4b',
    neutralPrimary: '#333333',
    neutralDark: '#272727',
    black: '#1d1d1d',
    white: '#ffffff'
  }
});

Responsive Design

Responsive design utilities help you create styles that adapt to different screen sizes. The `getScreenSelector` function returns a media query string for a given breakpoint, which can be used to apply styles conditionally.

const { getScreenSelector } = require('@fluentui/style-utilities');

const screenSelector = getScreenSelector('medium');

const styles = {
  root: {
    [screenSelector]: {
      backgroundColor: 'blue'
    }
  }
};

Style Merging

Style merging allows you to combine multiple style objects into a single class name. The `mergeStyles` function takes one or more style objects and returns a class name that can be applied to a component.

const { mergeStyles } = require('@fluentui/style-utilities');

const classNames = mergeStyles({
  backgroundColor: 'red',
  selectors: {
    ':hover': {
      backgroundColor: 'blue'
    }
  }
});

Other packages similar to @fluentui/style-utilities

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and flexible styling capabilities, including theming, style composition, and dynamic styling. Compared to @fluentui/style-utilities, Emotion offers a more modern and flexible API for styling React components.

styled-components

Styled-components is a popular library for styling React applications using tagged template literals. It allows you to write actual CSS code to style your components and supports theming and dynamic styling. Styled-components is similar to @fluentui/style-utilities in that it provides utilities for theming and responsive design, but it uses a different approach with tagged template literals.

aphrodite

Aphrodite is a library for writing CSS styles in JavaScript. It provides a simple API for defining and applying styles, with support for media queries and pseudo-selectors. Aphrodite is similar to @fluentui/style-utilities in its focus on writing styles in JavaScript, but it offers a more minimalistic and straightforward API.

README

@fluentui/style-utilities

Styling helpers for Fluent UI React (formerly Office UI Fabric React)

Using this package

Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as webpack which can resolve NPM package imports in your code and can bundle the specific things you import.

If you're using @fluentui/react, the @fluentui/style-utilities package contents are re-exported under @fluentui/react/lib/Styling. It's recommended to access the package this way rather than via a direct dependency.

In a project which doesn't use @fluentui/react, you can still install this package as a dependency:

npm install --save @fluentui/style-utilities

This gives you access to styling-related constants, utilities, and Fabric Core style classes through JavaScript.