我在3个不同的文件中包含3个组件:
//file1
const Icon1 = styled.div`
width: 10px;
`;
const Widget1 = () => <BaseWidget icon={<Icon1 />} />
//file2
const Icon2 = styled.div`
width: 15px;
`;
const Widget2 = () => <BaseWidget icon={<Icon2 />} />
//file3
const Icon3 = styled.div`
width: 20px;
`;
const Widget3 = () => <BaseWidget icon={<Icon3 />} />
和我的基本小部件:
//basewidget
const BaseWidget = (props) => <div>{props.icon}</div>
我的问题是:如何在basewidget中的props.icon中添加样式? 是否可以基于props.icon创建样式化的组件并添加公共的CSS属性? 如果不可能的话,最好的解决方案是什么?
谢谢, 杰夫
答案 0 :(得分:1)
当您传入icon={<Icon2 />}
时,您实际上是在传递JSX元素,该元素无法从另一侧使用带样式的组件进行样式设置,因为它不是组件。要设置组件的样式,它需要以className
作为道具。在这种情况下,最好的选择是编写一个样式组件包装器dev
,然后将样式层叠到您的{props.icon}
但是,因为您没有向Icon
传递任何道具,所以您可以轻松地将组件作为道具传递给它使其样式化。
<BaseWidget icon={Icon1} />
收货地点:
import styled from "styled-components";
const StyledIcon = styled.i``;
const BaseWidget = (props) => {
const { Icon } = props.icon;
return (
<StyledIcon as={Icon} />
);
}