如何使用带有样式组件的动态标签（React Emotion）

Question

我想制作一个动态组件。 （动态TAG将是样式元素->情感）

const Dynamic = ({ tag: Tag, children, ...rest }) =>
   <Tag {...rest}>
      { children }
   </Tag>

该组件将是样式化的组件，例如：

const Column = styled(div)({ color: 'red' })
const Row = styled(span)({ color: 'yellow' })

BUUUUUT看起来不错，并且可以正常工作：

当我尝试在另一个DynamicComponent中使用DynamicComponent时：

<DynamicComponent tag={Row}>
   {
      mapOver.map(item=>
         <DynamicComponent tag={Column}/>
      )
   }
</DynamicComponent>

然后出于某种原因，动态子级将使用动态父级的样式。

我有什么想念的吗？

P.S。

如果我不使用动态样式，则执行以下操作：

<Row>
   <Column/>
</Row>

然后正确应用样式，类名，样式标记。

要使其更加清晰：

如您所见，DynamicComponent将使用父级的样式，类名，样式标记...（我不会期望的行为）

Answer 1

在使用样式组件方面存在误解，因为标记旨在用作HTML标记（输入，div等）。最好的方法是分别定义StyledRow和StyledColumn并使用适当的名称。这也将有助于使您的代码更具可读性。

Answer 2

这个好例子说明了如何为 styled-component 创建动态标签名称：

// All headings use the same styled-component "Heading" function
const Heading = styled.div`
    font-size: ${({level}) => 4/level }em; // <- dynamic font size
    font-weight: 300;
    margin: 0;
`

// the trick here is the "as={...}" to create dynamic tag name
const Header = ({level = 1, children}) => (
    <Heading as={`h${level}`} level={level}>
        {children}
    </Heading>
)


ReactDOM.render(
  <div>
    <Header>Hello, world!</Header>
    <Header level={2}>Title 2</Header>
    <Header level={3}>Title 3</Header>
  </div>,
  document.body
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js">
</script>

"as" prop documentation