Function createStyledElementComponent

packages/styletron-react/src/index.tsx:440–544

(styletron: Styletron)

}

export function createStyledElementComponent(styletron: Styletron) {
  const {reducers, base, driver, wrapper, getInitialStyle, ext} = styletron;

  if (__BROWSER__ && __DEV__) {
    var debugStackInfo, debugStackIndex;
    if (styletron.debug) {
      debugStackInfo = styletron.debug.stackInfo;
      debugStackIndex = styletron.debug.stackIndex;
    }
  }

  if (__BROWSER__ && __DEV__) {
    var debugClassName;
  }

  const StyledElement = React.forwardRef<StyletronProps, any>((props, ref) => {
    const styletron: StandardEngine = React.useContext(StyletronContext);
    const debugEngine = React.useContext(DebugEngineContext);
    const hydrating = React.useContext(HydrationContext);
    checkNoopEngine(styletron);

    const elementProps: any = omitPrefixedKeys(props);
    let style = resolveStyle(getInitialStyle, reducers, props);

    if (props.$style) {
      if (typeof props.$style === "function") {
        style = deepMerge(style, props.$style(props));
      } else {
        style = deepMerge(style, props.$style);
      }
    }

    const styleClassString = driver(style, styletron);
    const Element = props.$as ? props.$as : base;
    elementProps.className = props.className
      ? `${props.className} ${styleClassString}`
      : styleClassString;

    if (__BROWSER__ && __DEV__ && debugEngine && !hydrating) {
      if (!debugClassName) {
        debugClassName = debugEngine.debug({
          stackInfo: debugStackInfo,
          stackIndex: debugStackIndex,
        });
      }

      const joined = `${debugClassName} ${elementProps.className}`;
      elementProps.className = joined;
    }

    if (__BROWSER__ && __DEV__ && window.__STYLETRON_DEVTOOLS__) {
      window.__STYLETRON_DEVTOOLS__.stylesMap.set(
        elementProps.className,
        style,
      );
      if (ext) {
        window.__STYLETRON_DEVTOOLS__.extensionsMap.set(
          elementProps.className,