javascript - 如何将样式化组件用于作为 props 传递的组件

Question

我有 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 属性吗？如果不可能，最好的解决方案是什么？

谢谢，杰夫

Answer 1

当您传入 icon={<Icon2 />} 时您实际上传递的是一个 JSX 元素，该元素无法从另一侧使用 styled-components 进行样式设置，因为它不是一个组件。要设置组件的样式，需要使用 className作为 Prop 。在这种情况下，最好的选择是编写一个样式组件包装器 dev并让样式层叠到您的{props.icon}

但是因为您没有向 Icon 传递任何 Prop 您可以轻松地将组件作为 Prop 传递，使其具有样式。

<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