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?
SomeComponent must accept a passed-in
See this CodeSandbox, the
TextLinkA component CANNOT be customized by
TextLinkB, on the other hand, CAN!
The difference between them is the
...rest prop which also includes
In the styled-components document, it says:
If you use the
MyComponentdoes not render the passed-in
classNameprop, then no styles will be applied. To avoid this issue, make sure your component attaches the passed-in
classNameto 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