How to use @uifabric/merge-styles - 10 common examples

export function print(val: string, serialize: () => string, indent: (val: string) => string): string {
  const classNames = [];
  const rules = [];
  const parts = val.split(' ');

  // Iterate through all class names in the value, and for each, determine if merge-styles
  // has a ruleset registered for the class. If so, serialize it to an expanded string. If not
  // add it to the static classNames array, as it's likely a global class name.
  for (const part of parts) {
    const ruleSet = Stylesheet.getInstance().insertedRulesFromClassName(part);

    if (ruleSet) {
      rules.push(_serializeRules(ruleSet, indent));
    } else {
      classNames.push(part);
    }
  }

  return [``, `${classNames.map((cn: string) => indent(cn)).join('\n')}`, `${rules.join('\n')}`].join('\n');
}

function _serializeRules(rules: string[], indent: (val: string) => string): string {
  const ruleStrings: string[] = [];
  const stylesheet = Stylesheet.getInstance();

  for (let i = 0; i < rules.length; i += 2) {
    const selector = rules[i];
    const insertedRules = rules[i + 1];

    if (insertedRules) {
      // Keyframes should not be parsed like other selector/rule mappings.
      if (selector !== 'keyframes') {
        ruleStrings.push(indent((i === 0 ? '' : selector + ' ') + `{`));
        insertedRules
          .split(';')
          .sort()
          .forEach((rule: string) => {
            if (rule) {
              const [name, value] = rule.split(':');
              let delimiter: string | RegExp = ' ';

import * as React from 'react';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { mergeStyles } from '@uifabric/merge-styles';
import { IColor, getColorFromString } from 'office-ui-fabric-react/lib/Color';

const colorLabelClassName = mergeStyles({
  fontSize: 16,
  fontWeight: 800,
  marginLeft: 20
});

const colorBoxClassName = mergeStyles({
  width: 20,
  height: 20,
  display: 'inline-block',
  position: 'absolute',
  left: 5,
  top: 5,
  border: '1px solid black',
  flexShrink: 0
});

const textBoxClassName = mergeStyles({
  width: 100
});

const colorPanelClassName = mergeStyles({
  position: 'relative' /* This is necessary to make position: absolute; work in the other style. */

fontWeight: 800,
  marginLeft: 20
});

const colorBoxClassName = mergeStyles({
  width: 20,
  height: 20,
  display: 'inline-block',
  position: 'absolute',
  left: 5,
  top: 5,
  border: '1px solid black',
  flexShrink: 0
});

const textBoxClassName = mergeStyles({
  width: 100
});

const colorPanelClassName = mergeStyles({
  position: 'relative' /* This is necessary to make position: absolute; work in the other style. */
});

export interface IThemeDesignerColorPickerProps {
  color: IColor;
  onColorChange: (color: IColor | undefined) => void;
  label: string;
}

export interface IThemeDesignerColorPickerState {
  isColorPickerVisible: boolean;
  editingColorStr?: string;

get: (): string => {
      // tslint:disable-next-line:no-any
      const style: IRawStyle = { [cssProperty]: (getTheme().palette as any)[colorName] };

      return mergeStyles(isHover ? { selectors: { ':hover': style } } : style).toString();
    },
    enumerable: true,

let slots = (memoizedClassNamesMap[displayName] as any).slots;
      let defaultStyles;
      if (!slots) {
        defaultStyles = _resolveStyles(componentProps, theme, tokens, options.styles, settings.styles);
        (memoizedClassNamesMap[displayName] as any).slots = Object.keys(defaultStyles);
        slots = (memoizedClassNamesMap[displayName] as any).slots;
      }

      // Memoize based on the base styling of the component (i.e. without user specified props).
      for (const key of slots) {
        if (!current.map.hasOwnProperty(key)) {
          // Get default styles once if we didn't get them before.
          if (!defaultStyles) {
            defaultStyles = _resolveStyles(componentProps, theme, tokens, options.styles, settings.styles);
          }
          current.map[key] = { className: mergeStyles(defaultStyles[key]), map: {} };
        }
        finalStyles[key] = current.map[key].className;
      }

      if (componentProps.styles) {
        const userStyles: any =
          typeof componentProps.styles === 'function'
            ? componentProps.styles(componentProps as TViewProps, theme, tokens)
            : componentProps.styles;
        styles = concatStyleSets(styles, userStyles);
        if (userStyles) {
          const userStyleKeys = Object.keys(userStyles);
          for (const key of userStyleKeys) {
            if (finalStyles.hasOwnProperty(key)) {
              finalStyles[key] = mergeStyles([current.map[key].className], userStyles[key]);
            } else {

const selectors: any                                                                                  = {};
            selectors[`> *:nth-child(-n+${this.headerCount})`]                                                    = {
                borderBottom: "1px solid rgba(0, 0, 0, 0.35)"
            };
            selectors[`> *:not(:nth-last-child(-n+${this.headerCount})):not(:nth-child(-n+${this.headerCount}))`] = {
                borderBottom: "1px solid rgba(0, 0, 0, 0.2)"
            };
            selectors[`> *:not(:nth-child(${this.headerCount}n))`]                                                = {
                borderRight: "1px solid rgba(0, 0, 0, 0.2)"
            };
            selectors[`> *`]                                                                                      = {
                paddingLeft: "5px"
            };

            // noinspection TypeScriptValidateTypes
            return mergeStyleSets({
                root: [
                    "technical-description",
                    {
                        gridTemplateColumns: "200px ".repeat(this.headerCount - 1) + "auto",
                        display:             "grid",
                        selectors
                    },
                ]
            });
        }
    }

(classNames: GlobalClassNames | any, disableGlobalClassNames?: boolean): Partial> => {
    const styleSheet = Stylesheet.getInstance();

    if (disableGlobalClassNames) {
      // disable global classnames
      return Object.keys(classNames).reduce((acc: any, className: string) => {
        acc[className] = styleSheet.getClassName(classNames[className]);
        return acc;
      }, {});
    }

    // use global classnames
    return classNames;
  }
);

import { mergeCssSets, IStyleSet, IProcessedStyleSet, Stylesheet } from '@uifabric/merge-styles';
import { IStyleFunctionOrObject } from '@uifabric/merge-styles';
import { getRTL } from './rtl';

const MAX_CACHE_COUNT = 50;
let _memoizedClassNames = 0;

const stylesheet = Stylesheet.getInstance();

if (stylesheet && stylesheet.onReset) {
  stylesheet.onReset(() => _memoizedClassNames++);
}

// Note that because of the caching nature within the classNames memoization,
// I've disabled this rule to simply be able to work with any types.
// tslint:disable:no-any

// This represents a prop we attach to each Map to indicate the cached return value
// associated with the graph node.
const RetVal = '__retval__';

interface IRecursiveMemoNode extends Map {
  [RetVal]?: string;
}

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
import { Stylesheet } from '@uifabric/merge-styles';

const stylesheet = Stylesheet.getInstance();

stylesheet.setConfig({
    defaultPrefix: 'insights',
});