如何使用带有样式组件的动态标签（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>

然后正确应用样式，classNames，样式标签。

为了使它更清晰：

正如您所看到的，DynamicComponent将使用父级的样式，classNames，样式标签......（不是我想要的行为）

Answer 1

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