如何创建动态样式的组件?

时间:2018-06-21 06:02:46

标签: reactjs styled-components emotion

我想要达到的目标是这样的:

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

我的问题是,这是否可以实现?或者我缺少任何东西吗?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

似乎我已经找到解决问题的方法。与可能遇到相同问题的人分享我的答案。

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

import styled from 'react-emotion'

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

这按预期工作。

如果有人有更好的答案,请发表。谢谢