How to use the @uifabric/styling.concatStyleSets function in @uifabric/styling

To help you get started, we’ve selected a few @uifabric/styling examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / foundation / src / next / composed.tsx View on Github external
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 {
              finalStyles[key] = mergeStyles(userStyles[key]);
            }
          }
        }
      }
    } else {
      styles = _resolveStyles(componentProps, theme, tokens, options.styles, settings.styles, componentProps.styles);
    }

    const viewProps = {
github OfficeDev / office-ui-fabric-react / packages / experiments / src / utilities / createComponent.tsx View on Github external
function _resolveStyles>(
  props: TProps,
  theme: ITheme,
  tokens: TTokens,
  ...allStyles: (IStylesFunctionOrObject | undefined)[]
): ReturnType {
  return concatStyleSets(
    ...allStyles.map((styles: IStylesFunctionOrObject | undefined) =>
      typeof styles === 'function' ? styles(props, theme, tokens) : styles
    )
  );
}
github OfficeDev / office-ui-fabric-react / packages / foundation / src / createComponent.tsx View on Github external
function _resolveStyles>(
  props: TProps,
  theme: ITheme,
  tokens: TTokens,
  ...allStyles: (IStylesFunctionOrObject | undefined)[]
): ReturnType {
  return concatStyleSets(
    ...allStyles.map((styles: IStylesFunctionOrObject | undefined) =>
      typeof styles === 'function' ? styles(props, theme, tokens) : styles
    )
  );
}
github OfficeDev / office-ui-fabric-react / packages / foundation / src / next / composed.tsx View on Github external
function _resolveStyles>(
  props: TProps,
  theme: ITheme,
  tokens: TTokens,
  ...allStyles: (IStylesFunctionOrObject | undefined)[]
): ReturnType {
  return concatStyleSets(
    ...allStyles.map((styles: IStylesFunctionOrObject | undefined) =>
      typeof styles === 'function' ? styles(props, theme, tokens) : styles
    )
  );
}