function styled(Component) {
  const componentCreator = (style, options = {}) => {
    const { name, ...stylesOptions } = options;

    if (process.env.NODE_ENV !== 'production' && Component === undefined) {
      throw new Error(
        [
          'You are calling styled(Component)(style) with an undefined component.',
          'You may have forgotten to import it.',
        ].join('\n'),
      );
    }

    let classNamePrefix = name;

    if (process.env.NODE_ENV !== 'production' && !name) {
      // Provide a better DX outside production.
      classNamePrefix = getDisplayName(Component);
      warning(
        typeof classNamePrefix === 'string',
        [
          'Material-UI: the component displayName is invalid. It needs to be a string.',
          `Please fix the following component: ${Component}.`,
        ].join('\n'),
      );
    }

    const stylesOrCreator =
      typeof style === 'function'
        ? theme => ({ root: props => style({ theme, ...props }) })
        : { root: style };

    const useStyles = makeStyles(stylesOrCreator, {
      Component,
      name: name || Component.displayName,
      classNamePrefix,
      ...stylesOptions,
    });

    let filterProps;
    let propTypes = {};

    if (style.filterProps) {
      filterProps = style.filterProps;
      delete style.filterProps;
    }

    /* eslint-disable react/forbid-foreign-prop-types */
    if (style.propTypes) {
      propTypes = style.propTypes;
      delete style.propTypes;
    }
    /* eslint-enable react/forbid-foreign-prop-types */

    const StyledComponent = React.forwardRef(function StyledComponent(props, ref) {
      const {
        children,
        className: classNameProp,
        clone,
        component: ComponentProp,
        ...other
      } = props;
      const classes = useStyles(props);
      const className = clsx(classes.root, classNameProp);

      if (clone) {
        return React.cloneElement(children, {
          className: clsx(children.props.className, className),
        });
      }

      let spread = other;
      if (filterProps) {
        spread = omit(spread, filterProps);
      }

      if (typeof children === 'function') {
        return children({ className, ...spread });
      }

      const FinalComponent = ComponentProp || Component;

      return (
        <FinalComponent ref={ref} className={className} {...spread}>
          {children}
        </FinalComponent>
      );
    });

    StyledComponent.propTypes = {
      /**
       * A render function or node.
       */
      children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
      /**
       * @ignore
       */
      className: PropTypes.string,
      /**
       * If `true`, the component will recycle it's children DOM element.
       * It's using `React.cloneElement` internally.
       */
      clone: chainPropTypes(PropTypes.bool, props => {
        if (props.clone && props.component) {
          return new Error('You can not use the clone and component properties at the same time.');
        }
        return null;
      }),
      /**
       * The component used for the root node.
       * Either a string to use a DOM element or a component.
       */
      component: PropTypes.elementType,
      ...propTypes,
    };

    if (process.env.NODE_ENV !== 'production') {
      StyledComponent.displayName = `Styled(${classNamePrefix})`;
    }

    hoistNonReactStatics(StyledComponent, Component);

    return StyledComponent;
  };

  return componentCreator;
}
function styled(Component) {
  const componentCreator = (style, options = {}) => {
    const { name, ...stylesOptions } = options;

    if (process.env.NODE_ENV !== 'production' && Component === undefined) {
      throw new Error(
        [
          'You are calling styled(Component)(style) with an undefined component.',
          'You may have forgotten to import it.',
        ].join('\n'),
      );
    }

    let classNamePrefix = name;

    if (process.env.NODE_ENV !== 'production' && !name) {
      // Provide a better DX outside production.
      classNamePrefix = getDisplayName(Component);
      warning(
        typeof classNamePrefix === 'string',
        [
          'Material-UI: the component displayName is invalid. It needs to be a string.',
          `Please fix the following component: ${Component}.`,
        ].join('\n'),
      );
    }

    const stylesOrCreator =
      typeof style === 'function'
        ? theme => ({ root: props => style({ theme, ...props }) })
        : { root: style };

    const useStyles = makeStyles(stylesOrCreator, {
      Component,
      name: name || Component.displayName,
      classNamePrefix,
      ...stylesOptions,
    });

    let filterProps;
    let propTypes = {};

    if (style.filterProps) {
      filterProps = style.filterProps;
      delete style.filterProps;
    }

    /* eslint-disable react/forbid-foreign-prop-types */
    if (style.propTypes) {
      propTypes = style.propTypes;
      delete style.propTypes;
    }
    /* eslint-enable react/forbid-foreign-prop-types */

    const StyledComponent = React.forwardRef(function StyledComponent(props, ref) {
      const {
        children,
        className: classNameProp,
        clone,
        component: ComponentProp,
        ...other
      } = props;
      const classes = useStyles(props);
      const className = clsx(classes.root, classNameProp);

      if (clone) {
        return React.cloneElement(children, {
          className: clsx(children.props.className, className),
        });
      }

      let spread = other;
      if (filterProps) {
        spread = omit(spread, filterProps);
      }

      if (typeof children === 'function') {
        return children({ className, ...spread });
      }

      const FinalComponent = ComponentProp || Component;

      return (
        <FinalComponent ref={ref} className={className} {...spread}>
          {children}
        </FinalComponent>
      );
    });

    StyledComponent.propTypes = {
      /**
       * A render function or node.
       */
      children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
      /**
       * @ignore
       */
      className: PropTypes.string,
      /**
       * If `true`, the component will recycle it's children DOM element.
       * It's using `React.cloneElement` internally.
       */
      clone: chainPropTypes(PropTypes.bool, props => {
        if (props.clone && props.component) {
          return new Error('You can not use the clone and component properties at the same time.');
        }
        return null;
      }),
      /**
       * The component used for the root node.
       * Either a string to use a DOM element or a component.
       */
      component: PropTypes.elementType,
      ...propTypes,
    };

    if (process.env.NODE_ENV !== 'production') {
      StyledComponent.displayName = `Styled(${classNamePrefix})`;
    }

    hoistNonReactStatics(StyledComponent, Component);

    return StyledComponent;
  };

  return componentCreator;
}
function styled ( Component ) { const componentCreator = ( style , options = { } ) => { const { name , ... stylesOptions } = options ; if ( process . env . NODE_ENV !== 'production' && Component === undefined ) { throw new Error ( [ 'You are calling styled(Component)(style) with an undefined component.' , 'You may have forgotten to import it.' , ] . join ( '\n' ) , ) ; } let classNamePrefix = name ; if ( process . env . NODE_ENV !== 'production' && ! name ) { // Provide a better DX outside production. classNamePrefix = getDisplayName ( Component ) ; warning ( typeof classNamePrefix === 'string' , [ 'Material-UI: the component displayName is invalid. It needs to be a string.' , ` ${ Component } ` , ] . join ( '\n' ) , ) ; } const stylesOrCreator = typeof style === 'function' ? theme => ( { root : props => style ( { theme , ... props } ) } ) : { root : style } ; const useStyles = makeStyles ( stylesOrCreator , { Component , name : name || Component . displayName , classNamePrefix , ... stylesOptions , } ) ; let filterProps ; let propTypes = { } ; if ( style . filterProps ) { filterProps = style . filterProps ; delete style . filterProps ; } /* eslint-disable react/forbid-foreign-prop-types */ if ( style . propTypes ) { propTypes = style . propTypes ; delete style . propTypes ; } /* eslint-enable react/forbid-foreign-prop-types */ const StyledComponent = React . forwardRef ( function StyledComponent ( props , ref ) { const { children , className : classNameProp , clone , component : ComponentProp , ... other } = props ; const classes = useStyles ( props ) ; const className = clsx ( classes . root , classNameProp ) ; if ( clone ) { return React . cloneElement ( children , { className : clsx ( children . props . className , className ) , } ) ; } let spread = other ; if ( filterProps ) { spread = omit ( spread , filterProps ) ; } if ( typeof children === 'function' ) { return children ( { className , ... spread } ) ; } const FinalComponent = ComponentProp || Component ; return ( < FinalComponent ref = { ref } className = { className } { ... spread } > { children } < / FinalComponent > ) ; } ) ; StyledComponent . propTypes = { /**
       * A render function or node.
       */ children : PropTypes . oneOfType ( [ PropTypes . node , PropTypes . func ] ) , /**
       * @ignore
       */ className : PropTypes . string , /**
       * If `true`, the component will recycle it's children DOM element.
       * It's using `React.cloneElement` internally.
       */ clone : chainPropTypes ( PropTypes . bool , props => { if ( props . clone && props . component ) { return new Error ( 'You can not use the clone and component properties at the same time.' ) ; } return null ; } ) , /**
       * The component used for the root node.
       * Either a string to use a DOM element or a component.
       */ component : PropTypes . elementType , ... propTypes , } ; if ( process . env . NODE_ENV !== 'production' ) { StyledComponent . displayName = ` ${ classNamePrefix } ` ; } hoistNonReactStatics ( StyledComponent , Component ) ; return StyledComponent ; } ; return componentCreator ; }
styled-components's API removes the mapping between components and styles. Using components as a low-level styling construct can be simpler.
styled - components s API removes the mapping between components and styles . Using components as a low - level styling construct can be simpler .
Creates a styled component.