如何通过`styled（）`将`as`用于包装的React组件

Question

我想使用as属性更改react组件的标签类型。看起来不起作用，内容将消失。

我想在下面的代码中显示foo文本。 但是，只存在<p>标签，没有值。

const ChildComponent = () => <div>foo</div>;
const StyledChildComponent = styled(ChildComponent)`
  // some styles
`;

const ParentComponent = () => (
  <StyledChildComponent as="p" />
);

Chrome开发工具上没有错误消息。

相关模块的版本如下

"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.2.0",