attrs() are no longer merged in v4

Description

👋 Hello. I’ve been investigating a migration from v3 to v4 and have been seeing some different results with the .attrs() method while extending other styled-components.

Within our component library we have several styled components that use CSS classes applied via the attrs() method. Example

We also have components that “wrap” (not using the .extend() API) to apply additional classNames.

const Tooltip = styled.div.attrs({ className: 'tooltip' })``;
const LightTooltip = styled(Tooltip).attrs({ className: 'tooltip--light' })``;

In v4 it doesn’t seem that this type of attrs() merging is possible. Doesn’t seem to be possible even with a .attrs(props => ({})) callback. Is this expected?

It seems some attributes are shallow merged (like styles in #1877). Should this have the same treatment if it’s a common pattern?

Environment

CodeSandbox default create-react-app environment.

Reproduction

• styled-components@3.4.10 with attr merging
  • https://codesandbox.io/s/o52l69rkwy
• styled-components@4.1.2 without attr merging
  • https://codesandbox.io/s/z2k437v4r3

Steps to reproduce

1. Create a styled-component with a className provided via the attrs() method
2. Create another styled-component that wraps the original component styled(InnerComponent) which also provides a className via the attrs() method
3. Only the outer className is being provided.

Expected Behavior

Similar to v3 of styled-components, the attrs are merged if a component is extended.

Actual Behavior

Only the outer attrs() methods are respected.

[austingreendev]

That makes much sense! Thanks for the diagram at the end of #2258

Thanks for the help. Closing.

[austingreendev]

I don’t think we should be doing that, as you should manually be opting into letting an attribute being overriden, so I think the behavior in v4 is correct

Agreed! I’m assuming the behavior worked for us since we were using the styled(Component) syntax rather than Component.extend.

Right now, your lower-level component basically has to explicitly allow overriding the attr, which is exactly what attrs is for

Is there a “best” approach to reliably allow className to be overridden in the lower component? I’ve updated the v4 Codesandbox to include another example with the new props callback in attrs() and I’m still unable to get className to be provided.

export const InnerComponent = styled.div.attrs(props => ({
  className: classNames(props.className, "component-inner")
}))``;

export const OuterComponent = styled(InnerComponent).attrs({
  className: "component-outer"
})``;