样式化组件正确使用styled（MyComponent）

Question

尝试理解样式化组件库的API时遇到了一些麻烦。

假设我有一个组件：

const Img = styled.img`
 ${props => props.styles}
`

const Image = (props) => <Img {...props} />

使用的主要区别是什么

const styles = css`
 border: 1px solid red;
`

const ImageWithStyles = <Img styles={styles}/>

vs

const ImageWithStyles = styled(Img)`
 border: 1px solid red;
`

我阅读了文档：

  

在不需要时，请仔细考虑是否将自己的组件包装在样式化的组件中。您将禁用道具的自动白名单，并颠倒建议的样式组件和结构组件的顺序。

https://www.styled-components.com/docs/basics#extending-styles：

那么styled()函数在您自己的组件中是否有任何实际用途？

谢谢！