如何创建动态样式组件？

Question

我想要实现的是这样的：

import styled from 'react-emotion'

const StyledComponent = styled(({tag}) => tag)`
    // some css styles
`

并像这样使用它：

<StyledComponent tag=div"/>
<StyledComponent tag="p"/>
<StyledComponent tag="ul"/>
// etc

我的期望是它应该生成 HTML 如下：

<div class="some-class"></div>
<p class="some-class"></p>
<ul class="some-class"></ul>

实际输出：

div
p
ul

我的问题是，这可以实现还是我遗漏了什么？

Answer 1

您使用的 react-emotion 方式有误，请试试这个。

const StyledComponent = ({ tag, children, ...props }) => {
  const Container = styled(tag)`
    background-colo: red;
  `;
  return <Container {...props}>{children}</Container>;
};

演示：https://codesandbox.io/s/lr4xxp3757

Answer 2

看来我找到了解决问题的方法。与可能运行遇到相同问题的人分享我的答案。

我将 StyledComponent 声明更改为以下内容：

import styled from 'react-emotion'

const StyledComponent = styled(({tag, children, ...props}) => React.createElement(tag, props, children))`
    // some css styles
`

这是按预期工作的。

如果有人有更好的答案请post。谢谢

如何创建动态样式组件？

How to create dynamic styled component?

emotion

reactjs

styled-components