`as` removes bases styles for functional/class components

Environment

System:

• OS: macOS 10.14.2
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 8.9.0
• Yarn: 1.12.3

npmPackages:

• babel-plugin-styled-components: 1.5.1 => 1.5.1
• styled-components: 4.1.2 => 4.1.2

Reproduction

https://codesandbox.io/s/30k0n99jv5

Steps to reproduce

1. Create Styled-Component
2. Use the Styled-Component in a functional component (be sure to pass down your props to the styled-component)
3. Extend functional component with some additional styles
4. Use your extended version of the component with the as as prop

Expected Behavior

• Base styles should still be applied
• Extended styles should be applied overtop of base styles
• New tag is used

Actual Behavior

• Base styles are dropped, and only the extended styles are applied
• New tag is still properly applied.

[AustP]

I’m seeing this on 4.1.3 as well.

Headline.js:

import styled from 'styled-components';

const Headline = styled.h1`
  color: orange;
  display: block;
  font-weight: 300;
`;

export default Headline;

StyledHeadline.js:

import { Headline } from 'components';
import styled from 'styled-components';

const StyledHeadline = styled(Headline)`
  color: pink;
`;

When I use StyledHeadline with the as prop, the only styles applied are color: pink;.

[usagi-f]

I encountered this issue too.

In case of use styled-component for the UI-library that has internally gives className, and using as option will behave exactly as the pasted by guys the examples. This could not keep the appearance as enough UI component.

I read styled-component’s source code a little. For now, I just found behavior is below.

const elementToBeCreated = this.props.as || this.attrs.as || target;

https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/models/StyledComponent.js#L135

return createElement(elementToBeCreated, propsForElement);

https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/models/StyledComponent.js#L172

Is it generated another element when use as? Which means, Even if can be passed enough props object by propsForElement, the internal logic by the component itself that is originally passed as a target is not executed.

If the classNames within a component are internally generated by different architectures such as classnames, the component will be destroyed when use with as.

Is as use case only use to the primitive element?

This is might become a stall point when use styled-component with some UI library. Also, this may be breaking if the UI library has props of the same name (as).

If my understanding is not wrong, the best workaround is … “Take care when use as option” 🤕 Can I know the contributor’s opinion about this?

cc: @probablyup @leerob thanks for your example, It is easy to understand.