• Version 7.20.0
  • Published
  • 660 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;

      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>