• Version 7.25.1
  • Published
  • 678 kB
  • 6 dependencies
  • MIT license


npm i @uifabric/styling
yarn add @uifabric/styling
pnpm add @uifabric/styling


Styling helpers for Fluent UI React.



variable AnimationClassNames

const AnimationClassNames: { [x: string]: string };

variable ColorClassNames

const ColorClassNames: IColorClassNames;

    variable EdgeChromiumHighContrastSelector

    const EdgeChromiumHighContrastSelector: string;
    • Deprecated

      Use HighContrastSelector

    variable FontClassNames

    const FontClassNames: { [x: string]: string };

    variable hiddenContentStyle

    const hiddenContentStyle: IRawStyle;

      variable HighContrastSelector

      const HighContrastSelector: string;

        variable HighContrastSelectorBlack

        const HighContrastSelectorBlack: string;

          variable HighContrastSelectorWhite

          const HighContrastSelectorWhite: string;

            variable normalize

            const normalize: IRawStyle;

              variable noWrap

              const noWrap: IRawStyle;

                variable PulsingBeaconAnimationStyles

                const PulsingBeaconAnimationStyles: {
                continuousPulseAnimationDouble: typeof _continuousPulseAnimationDouble;
                continuousPulseAnimationSingle: typeof _continuousPulseAnimationSingle;
                createDefaultAnimation: typeof _createDefaultAnimation;

                  variable ScreenWidthMaxLarge

                  const ScreenWidthMaxLarge: number;

                    variable ScreenWidthMaxMedium

                    const ScreenWidthMaxMedium: number;

                      variable ScreenWidthMaxSmall

                      const ScreenWidthMaxSmall: number;

                        variable ScreenWidthMaxXLarge

                        const ScreenWidthMaxXLarge: number;

                          variable ScreenWidthMaxXXLarge

                          const ScreenWidthMaxXXLarge: number;

                            variable ScreenWidthMinLarge

                            const ScreenWidthMinLarge: number;

                              variable ScreenWidthMinMedium

                              const ScreenWidthMinMedium: number;

                                variable ScreenWidthMinSmall

                                const ScreenWidthMinSmall: number;

                                  variable ScreenWidthMinUhfMobile

                                  const ScreenWidthMinUhfMobile: number;

                                    variable ScreenWidthMinXLarge

                                    const ScreenWidthMinXLarge: number;

                                      variable ScreenWidthMinXXLarge

                                      const ScreenWidthMinXXLarge: number;

                                        variable ScreenWidthMinXXXLarge

                                        const ScreenWidthMinXXXLarge: number;

                                          variable ThemeSettingName

                                          const ThemeSettingName: string;


                                            function buildClassMap

                                            buildClassMap: <T extends Object>(styles: T) => { [key in keyof T]?: string };
                                            • Builds a class names object from a given map.

                                              Parameter styles

                                              Map of unprocessed styles.


                                              Map of property name to class name.

                                            function focusClear

                                            focusClear: () => IRawStyle;
                                            • Generates style to clear browser specific focus styles.

                                            function getEdgeChromiumNoHighContrastAdjustSelector

                                            getEdgeChromiumNoHighContrastAdjustSelector: () => {
                                            [EdgeChromiumHighContrastSelector]: IRawStyle;
                                            • The style which turns off high contrast adjustment in (only) Edge Chromium browser.


                                              Use getHighContrastNoAdjustStyle

                                            function getFadedOverflowStyle

                                            getFadedOverflowStyle: (
                                            theme: ITheme,
                                            color?: keyof ISemanticColors | keyof IPalette,
                                            direction?: 'horizontal' | 'vertical',
                                            width?: string | number,
                                            height?: string | number
                                            ) => IRawStyle;
                                            • - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element. - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover, selected, focus). - Requires the target to have position set to relative and overflow set to hidden.

                                              Parameter theme

                                              The theme object to use.

                                              Parameter color

                                              The background color to fade out to. Accepts only keys of ISemanticColors or IPalette. Defaults to 'bodyBackground'.

                                              Parameter direction

                                              The direction of the overflow. Defaults to horizontal.

                                              Parameter width

                                              The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.

                                              Parameter height

                                              The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.


                                              The style object.

                                              Example 1

                                              // Assuming the following DOM structure and the different background colors coming from
                                              // the parent holding the content.
                                              <div className={classNames.parent}>
                                              <span className={classNames.content}>Overflown Content</span>
                                              // This is how the style set would look in Component.styles.ts
                                              const { bodyBackground } = theme.semanticColors;
                                              const { neutralLighter } = theme.palette;
                                              // The second argument of getFadedOverflowStyle function is a string representing a key of
                                              // ISemanticColors or IPalette.
                                              const styles = {
                                              parent: [
                                              backgroundColor: bodyBackground,
                                              selectors: {
                                              '&:hover: {
                                              backgroundColor: neutralLighter
                                              '$content:after': {
                                              ...getFadedOverflowStyle(theme, 'bodyBackground')
                                              '&:hover $content:after': {
                                              ...getFadedOverflowStyle(theme, 'neutralLighter')
                                              content: [
                                              width: '100%',
                                              display: 'inline-block',
                                              position: 'relative',
                                              overflow: 'hidden'

                                            function getFocusOutlineStyle

                                            getFocusOutlineStyle: (
                                            theme: ITheme,
                                            inset?: number,
                                            width?: number,
                                            color?: string
                                            ) => IRawStyle;
                                            • Generates a style which can be used to set a border on focus.

                                              Parameter theme

                                              The theme object to use.

                                              Parameter inset

                                              The number of pixels to inset the border (default 0)

                                              Parameter width

                                              The border width in pixels (default 1)

                                              Parameter color

                                              Color of the outline (default theme.palette.neutralSecondary)


                                              The style object.

                                            function getFocusStyle

                                            getFocusStyle: {
                                            (theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;
                                            theme: ITheme,
                                            inset?: number,
                                            position?: 'relative' | 'absolute',
                                            highContrastStyle?: any,
                                            borderColor?: string,
                                            outlineColor?: string,
                                            isFocusedOnly?: boolean
                                            ): IRawStyle;
                                            • Generates a focus style which can be used to define an :after focus border.

                                              Parameter theme

                                              The theme object to use.

                                              Parameter options

                                              Options to customize the focus border.


                                              The style object.

                                            • Generates a focus style which can be used to define an :after focus border.

                                              Parameter theme

                                              The theme object to use.

                                              Parameter inset

                                              The number of pixels to inset the border.

                                              Parameter position

                                              The positioning applied to the container. Must be 'relative' or 'absolute' so that the focus border can live around it.

                                              Parameter highContrastStyle

                                              Style for high contrast mode.

                                              Parameter borderColor

                                              Color of the border.

                                              Parameter outlineColor

                                              Color of the outline.

                                              Parameter isFocusedOnly

                                              If the styles should apply on focus or not.


                                              The style object.


                                              Use the object parameter version instead.

                                            function getGlobalClassNames

                                            getGlobalClassNames: <T>(
                                            classNames: GlobalClassNames<T>,
                                            theme: ITheme,
                                            disableGlobalClassNames?: boolean
                                            ) => GlobalClassNames<T>;
                                            • Checks for the disableGlobalClassNames property on the theme to determine if it should return classNames Note that calls to this function are memoized.

                                              Parameter classNames

                                              The collection of global class names that apply when the flag is false. Make sure to pass in the same instance on each call to benefit from memoization.

                                              Parameter theme

                                              The theme to check the flag on

                                              Parameter disableGlobalClassNames

                                              Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.

                                            function getHighContrastNoAdjustStyle

                                            getHighContrastNoAdjustStyle: () => IRawStyle;
                                            • The style which turns off high contrast adjustment in browsers.

                                            function getIcon

                                            getIcon: (name?: string) => IIconRecord | undefined;
                                            • Gets an icon definition. If an icon is requested but the subset has yet to be registered, it will get registered immediately.

                                              Parameter name

                                              Name of icon.


                                              • @public

                                            function getIconClassName

                                            getIconClassName: (name: string) => string;
                                            • Gets an icon classname. You should be able to add this classname to an I tag with no additional classnames, and render the icon.


                                              • @public

                                            function getInputFocusStyle

                                            getInputFocusStyle: (
                                            borderColor: string,
                                            borderRadius: string | number,
                                            borderType?: 'border' | 'borderBottom',
                                            borderPosition?: number
                                            ) => IRawStyle;
                                            • Generates text input border styles on focus.

                                              Parameter borderColor

                                              Color of the border.

                                              Parameter borderRadius

                                              Radius of the border.

                                              Parameter borderType

                                              Type of the border.

                                              Parameter borderPosition

                                              Position of the border relative to the input element (default to -1 as it's the most common border width of the input element)


                                              The style object.

                                            function getPlaceholderStyles

                                            getPlaceholderStyles: (styles: IStyle) => IStyle;
                                            • Generates placeholder style for each of the browsers supported by office-ui-fabric-react.

                                              Parameter styles

                                              The style to use.


                                              The placeholder style object for each browser depending on the placeholder directive it uses.

                                            function getScreenSelector

                                            getScreenSelector: (min: number | undefined, max: number | undefined) => string;

                                              function getTheme

                                              getTheme: (depComments?: boolean) => ITheme;
                                              • Gets the theme object

                                                Parameter depComments

                                                Whether to include deprecated tags as comments for deprecated slots.

                                              function loadTheme

                                              loadTheme: (theme: IPartialTheme, depComments?: boolean) => ITheme;
                                              • Applies the theme, while filling in missing slots.

                                                Parameter theme

                                                Partial theme object.

                                                Parameter depComments

                                                Whether to include deprecated tags as comments for deprecated slots.

                                              function registerIconAlias

                                              registerIconAlias: (iconName: string, mappedToName: string) => void;
                                              • Remaps one icon name to another.

                                              function registerIcons

                                              registerIcons: (
                                              iconSubset: IIconSubset,
                                              options?: Partial<IIconOptions>
                                              ) => void;
                                              • Registers a given subset of icons.

                                                Parameter iconSubset

                                                the icon subset definition.

                                              function registerOnThemeChangeCallback

                                              registerOnThemeChangeCallback: (callback: (theme: ITheme) => void) => void;
                                              • Registers a callback that gets called whenever the theme changes. This should only be used when the component cannot automatically get theme changes through its state. This will not register duplicate callbacks.

                                              function removeOnThemeChangeCallback

                                              removeOnThemeChangeCallback: (callback: (theme: ITheme) => void) => void;
                                              • See registerOnThemeChangeCallback(). Removes previously registered callbacks.

                                              function setIconOptions

                                              setIconOptions: (options: Partial<IIconOptions>) => void;
                                              • Sets the icon options.


                                                • @public

                                              function unregisterIcons

                                              unregisterIcons: (iconNames: string[]) => void;
                                              • Unregisters icons by name.

                                                Parameter iconNames

                                                List of icons to unregister.


                                              interface IGetFocusStylesOptions

                                              interface IGetFocusStylesOptions {}

                                                property borderColor

                                                borderColor?: string;
                                                • Color of the border.

                                                property highContrastStyle

                                                highContrastStyle?: IRawStyle;
                                                • Style for high contrast mode.

                                                property inset

                                                inset?: number;
                                                • The number of pixels to inset the border.

                                                property isFocusedOnly

                                                isFocusedOnly?: boolean;
                                                • If the styles should apply on :focus pseudo element.

                                                property outlineColor

                                                outlineColor?: string;
                                                • Color of the outline.

                                                property position

                                                position?: 'relative' | 'absolute';
                                                • The positioning applied to the container. Must be 'relative' or 'absolute' so that the focus border can live around it.

                                                property width

                                                width?: number;
                                                • The width of the border in pixels.

                                                interface IIconOptions

                                                interface IIconOptions {}

                                                  property disableWarnings

                                                  disableWarnings: boolean;
                                                  • By default, registering the same set of icons will generate a console warning per duplicate icon registered, because this scenario can create unexpected consequences.

                                                    Some scenarios include:

                                                    Icon set was previously registered using a different base url. Icon set was previously registered but a different version was provided. Icons in a previous registered set overlap with a new set.

                                                    To simply ignore previously registered icons, you can specify to disable warnings. This means that if an icon which was previous registered is registered again, it will be silently ignored. However, consider whether the problems listed above will cause issues.

                                                  property warnOnMissingIcons

                                                  warnOnMissingIcons?: boolean;
                                                  • Deprecated

                                                    Use 'disableWarnings' instead.

                                                  interface IIconRecord

                                                  interface IIconRecord {}

                                                    property code

                                                    code: string | undefined;

                                                      property subset

                                                      subset: IIconSubsetRecord;

                                                        interface IIconSubset

                                                        interface IIconSubset {}

                                                          property fontFace

                                                          fontFace?: IFontFace;

                                                            property icons

                                                            icons: {
                                                            [key: string]: string | JSX.Element;

                                                              property mergeImageProps

                                                              mergeImageProps?: boolean;
                                                              • Indicates to the icon renderer that it is safe to merge any props on the original Icon element onto the child content element registered for the icon which are valid for HTML images.

                                                              property style

                                                              style?: IRawStyle;

                                                                interface IIconSubsetRecord

                                                                interface IIconSubsetRecord extends IIconSubset {}

                                                                  property className

                                                                  className?: string;

                                                                    property isRegistered

                                                                    isRegistered?: boolean;

                                                                      Type Aliases

                                                                      type GlobalClassNames

                                                                      type GlobalClassNames<IStyles> = Record<keyof IStyles, string>;


                                                                        namespace ZIndexes

                                                                        namespace ZIndexes {}

                                                                          variable Coachmark

                                                                          const Coachmark: number;

                                                                            variable FocusStyle

                                                                            const FocusStyle: number;

                                                                              variable KeytipLayer

                                                                              const KeytipLayer: number;

                                                                                variable Layer

                                                                                const Layer: number;

                                                                                  variable Nav

                                                                                  const Nav: number;

                                                                                    variable ScrollablePane

                                                                                    const ScrollablePane: number;
                                                                                    • Deprecated


                                                                                    Package Files (18)

                                                                                    Dependencies (6)

                                                                                    Dev Dependencies (4)

                                                                                    Peer Dependencies (0)

                                                                                    No peer dependencies.


                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@uifabric/styling.

                                                                                    • Markdown
                                                                                    • HTML
                                                                                      <a href="https://www.jsdocs.io/package/@uifabric/styling"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>