reactjs - 如何创建动态样式的组件?
问题描述
我想要实现的是这样的:
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
我的问题是,这可以实现还是我错过了什么?
解决方案
你用react-emotion
错了,试试这个。
const StyledComponent = ({ tag, children, ...props }) => {
const Container = styled(tag)`
background-colo: red;
`;
return <Container {...props}>{children}</Container>;
};
推荐阅读
- java - 必须有 Java 运行时环境 (JRE) 或 Java 开发工具包 (JDK) 才能运行 Eclipse 安装程序
- angular - 如何在angular6中重复表格
- r - 将列条目转换为具有条目计数的列标题
- abap - SAP ABAP 中阻止在导入新软件期间激活字典对象
- excel - 使用 VBA 将 .xls 批量转换为 .xlsx 而不打开工作簿时出现文件格式错误
- python - 如果模块中可用,是否可以在导入时避免执行检查功能
- c# - UWP - 将 TextBlock.Text 属性绑定到基类和派生类中都存在的属性时引发 AmbiguousMatchException
- python - 我可以在线抑制 mypy 错误吗?
- c# - 字典需要“System.Collections.Generic.IEnumerable`1[ShimbaSchool.Models.EventMessageDepartment]”类型的模型项
- javascript - 为什么 Array 的自定义实现比原生 JavaScript Array 更高效?