Function styled

packages/mui-styled-engine/src/index.ts:18–43

(tag: React.ElementType, options?: StyledOptions<any>)

export type { CreateStyled, StyledComponent, StyledOptions, StyledTags } from '@emotion/styled';

function styled(tag: React.ElementType, options?: StyledOptions<any>) {
  // Emotion's `styled` overloads each expect a specific tag/component shape;
  // none accept the broadened `React.ElementType` union, so cast the passthrough.
  const stylesFactory = emStyled(tag as any, options);

  if (process.env.NODE_ENV !== 'production') {
    return (...styles: any[]) => {
      const component = typeof tag === 'string' ? `"${tag}"` : 'component';
      if (styles.length === 0) {
        console.error(
          [
            `MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`,
            'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.',
          ].join('\n'),
        );
      } else if (styles.some((style) => style === undefined)) {
        console.error(
          `MUI: the styled(${component})(...args) API requires all its args to be defined.`,
        );
      }
      return stylesFactory(...styles);
    };
  }

  return stylesFactory;
}

export default styled as unknown as CreateStyled;