如何将样式化组件用于作为道具传递的组件

时间:2019-12-14 23:49:45

标签: javascript reactjs styled-components

我在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属性? 如果不可能的话,最好的解决方案是什么?

谢谢, 杰夫

1 个答案:

答案 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} />
  );
}

as Docs