Is it possible to extend a component and modify functional behavior while maintaining the component API?

Basically, I want to extend a components styles and include all the API behavior of a styled-component (as prop, string interpolation, etc), but add some functional differences to the render function.

Example

Simple style-only extension works just fine:

const Button = styled.button`
  border: 1px solid gray;
  background-color: lightgray;
`;

const BlueButton = styled(Button)`
  border-color: darkblue;
  background-color: lightblue;
`;

I can use BlueButton with an anchor tag using the as prop: <BlueButton as="a">.

What if I want to modify the render behavior as well?

let IconButton = ({ iconClass, children, ...props }) => (
  <Button {...props}>
    <i className={iconClass} /> {children}
  </Button>
);

IconButton = styled(IconButton)`
  i {
    height: 30px;
    width: 30px;
    margin-right: 5px;
  }
`;

The above captures the styling, but breaks when using the as prop. I would love to still be able to do <IconButton as="a">. I’m not sure if there is a pattern that will allow me to do this.

Live Example

[diondiondion]

Related feature request: #2129

Basically, we need a way to tell styled-components to ignore the as prop and just pass it on to the wrapped component.

In your example, it would then be passed on to the Button component and everything would work as expected again. To visualise this here’s an example of the prop being passed down explicitly:

let IconButton = ({ iconClass, as, children, ...props }) => (
  <Button {...props} as={as}>
    <i className={iconClass} /> {children}
  </Button>
);

Unfortunately, the request wasn’t received very well by the s-c team so far.

[stonebk]

What are the drawbacks to following the same pattern that React did with refs?

import { forwardAs } from 'styled-components';

const Button = styled.button`
    /* styles */
`;

const IconButton = forwardAs((props, as) => (
  <Button as={as} {...props}>
    <Icon>{icon}</Icon>
    {children}
  </Button>
))`
    /* icon button styles */
`;

It seems like we already have a well-established pattern for handling these types of props in React, why wouldn’t we just follow that pattern?