How to use the @uifabric/merge-styles.concatStyleSets function in @uifabric/merge-styles

To help you get started, we’ve selected a few @uifabric/merge-styles 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 / utilities / src / customizations / customizable.tsx View on Github external
{(context: ICustomizerContext) => {
              const defaultProps = Customizations.getSettings(fields, scope, context.customizations);

              // tslint:disable-next-line:no-any
              const componentProps = this.props as any;

              // If defaultProps.styles is a function, evaluate it before calling concatStyleSets
              if (defaultProps.styles && typeof defaultProps.styles === 'function') {
                defaultProps.styles = defaultProps.styles({ ...defaultProps, ...componentProps });
              }

              // If concatStyles is true and custom styles have been defined compute those styles
              if (concatStyles && (defaultProps.styles || componentProps.styles)) {
                const mergedStyles = concatStyleSets(defaultProps.styles, componentProps.styles);
                return ;
              }

              return ;
            }}
github OfficeDev / office-ui-fabric-react / packages / utilities / src / styled.tsx View on Github external
function _resolve(
  styleProps: TStyleProps,
  ...allStyles: (IStyleFunctionOrObject> | undefined)[]
): Partial | undefined {
  const result: Partial[] = [];

  for (const styles of allStyles) {
    if (styles) {
      result.push(typeof styles === 'function' ? styles(styleProps) : styles);
    }
  }
  if (result.length) {
    return concatStyleSets(...result);
  }

  return undefined;
}
github s-bauer / office-ui-fabric-vue / packages / office-ui-fabric-vue / src / Button / OfficeButton.style.ts View on Github external
export const getStyles = memoizeFunction((theme: ITheme, customStyles?: IOfficeButtonStyles, primary?: boolean): IOfficeButtonStyles => {
        const baseButtonStyles: IOfficeButtonStyles = getBaseStyles(theme);
        const defaultButtonStyles: IOfficeButtonStyles = {
            root: {
                minWidth: DEFAULT_BUTTON_MINWIDTH,
                height: DEFAULT_BUTTON_HEIGHT
            },
            label: {
                fontWeight: FontWeights.semibold
            }
        };

        return concatStyleSets(
            baseButtonStyles,
            defaultButtonStyles,
            primary ? primaryStyles(theme) : standardStyles(theme),
            customStyles
        )!;
    });