@uifabric/styling
    TypeScript icon, indicating that this package has built-in type declarations

    7.19.1 • Public • Published

    @uifabric/styling

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

    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:

    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:

    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.

    Keywords

    none

    Install

    npm i @uifabric/styling

    DownloadsWeekly Downloads

    98,543

    Version

    7.19.1

    License

    MIT

    Unpacked Size

    657 kB

    Total Files

    300

    Last publish

    Collaborators

    • uifabricteam
    • dzearing
    • kenotron_msft
    • ms-office
    • cliffkoh