# @uifabric/styling

> Styling helpers for Fluent UI React.

Latest version **7.25.1** (published 2022-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uifabric/styling
pnpm add @uifabric/styling
yarn add @uifabric/styling
bun add @uifabric/styling
```

## Health

**Score 50/100 (C)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 7.25.1 |
| Published | 2022-10-31 |
| First published | 2017-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 661.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20294 |
| Maintainers | microsoft1es, ecraig12345_msft, justslone, uifabricteam, dzearing, ms-office, cliffkoh |

## Links

- npm: https://www.npmjs.com/package/@uifabric/styling
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@uifabric/styling

## Dependencies (6)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [@fluentui/theme](https://npm.io/package/@fluentui/theme.md) ^1.7.13
- [@uifabric/utilities](https://npm.io/package/@uifabric/utilities.md) ^7.38.2
- [@uifabric/set-version](https://npm.io/package/@uifabric/set-version.md) ^7.0.24
- [@uifabric/merge-styles](https://npm.io/package/@uifabric/merge-styles.md) ^7.20.2
- [@microsoft/load-themed-styles](https://npm.io/package/@microsoft/load-themed-styles.md) ^1.10.26

## Recent versions

- 7.25.1 (latest) — 2022-10-31
- 6.50.7 (lts) — 2019-09-04
- 7.0.0-rc002 (next) — 2019-06-10
- 7.0.0-alpha034 (beta) — 2019-06-06
- 4.0.0-styling6 (styling) — 2017-05-18
- 7.25.0 — 2022-10-04
- 7.24.0 — 2022-10-04
- 7.23.1 — 2022-09-30
- 7.23.0 — 2022-09-29
- 7.22.3 — 2022-09-02
- 7.22.2 — 2022-09-02
- 7.22.1 — 2022-09-01
- 7.22.0 — 2022-08-30
- 7.21.3 — 2022-08-30
- 7.21.2 — 2022-08-17
- … 407 more at https://npm.io/package/@uifabric/styling/versions

## README

# @uifabric/styling

**Styling helpers for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))

## Using the styling 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 `@uifabric/styling` package contents are re-exported under `@fluentui/react/lib/Styling` (for `office-ui-fabric-react`, use `office-ui-fabric-react/lib/Styling`). It's recommended to access styling this way rather than via a direct dependency.

In a project which doesn't use `@fluentui/react` (or `office-ui-fabric-react`), you can still install the styling package as a dependency:

```bash
npm install --save @uifabric/styling
```

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

## Overriding the theme colors

The default palette of colors matches the default Fabric core styling conventions. However, it is possible to override the color slots to match your product requirements:

```tsx
import {
  loadTheme({
    palette: {
      themePrimary: 'red',
      themeSecondary: 'blue'
    }
  });
}
```

If you override theme settings, you need to do this before accessing theme colors. Otherwise you won't get a notification that the theme changed.

---
_Source: https://npm.io/package/@uifabric/styling · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._