我想要达到的目标是这样的:
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
我的问题是,这是否可以实现?或者我缺少任何东西吗?
答案 0 :(得分:1)
您以错误的方式使用react-emotion
,请尝试使用此方法。
const StyledComponent = ({ tag, children, ...props }) => {
const Container = styled(tag)`
background-colo: red;
`;
return <Container {...props}>{children}</Container>;
};
答案 1 :(得分:0)
似乎我已经找到解决问题的方法。与可能遇到相同问题的人分享我的答案。
我将StyledComponent
声明更改为以下内容:
import styled from 'react-emotion'
const StyledComponent = styled(({tag, children, ...props}) => React.createElement(tag, props, children))`
// some css styles
`
这按预期工作。
如果有人有更好的答案,请发表。谢谢