Why `styled()` Notation Doesn't Work

In styled-components, there is a styled(SomeComponent) notation, which is a very useful tool for customizing some components. But sometimes, it doesn't work. But how? And why?

TLTR: SomeComponent must accept a passed-in className prop.

See this CodeSandbox, the TextLinkA component CANNOT be customized by styled(). But TextLinkB, on the other hand, CAN!

The difference between them is the ...rest prop which also includes className❗

In the styled-components document, it says:

If you use the styled(MyComponent) notation and MyComponent does not render the passed-in className prop, then no styles will be applied. To avoid this issue, make sure your component attaches the passed-in className to a DOM node.

Because styled-components generates a random string as the className for each StyledComponent (the component defined by styled-components), this className contains the styling CSS. When using the styled() notation to wrap a StyledComponent, a new className is generated, but the styles are not applied unless we pass this new className to the original StyledComponent.

In the CodeSandbox example, I use ...rest to represent all of the other props, but we can also specify it with className.