Javascript 如何为作为道具传递的组件使用样式化组件

我在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 />} />

//文件1
const Icon1=styled.div`
宽度：10px；
`;
常数Widget1=（）=>
//文件2
const Icon2=styled.div`
宽度：15px；
`;
常数Widget2=（）=>
//文件3
const Icon3=styled.div`
宽度：20px；
`;
常数Widget3=（）=>

和我的基本小部件：

//basewidget
const BaseWidget = (props) => <div>{props.icon}</div>

//basewidget
const BaseWidget=（props）=>{props.icon}

我的问题是：如何在basewidget中为props.icon添加样式？ 我可以基于props.icon创建一个样式化组件并添加一个公共css属性吗？ 如果不可能，最好的解决方案是什么

谢谢，

---

Jef

当您传入

icon={}

时，实际上是在传递一个JSX元素，该元素不能从另一端使用已样式化的组件进行样式化，因为它不是一个组件。要设置组件的样式，它需要将

className

作为一个道具。在这种情况下，您最好编写一个样式化的组件包装器

dev

，并让样式级联到您的

{props.icon}

但是，由于您没有将任何道具传递到

图标

，因此可以轻松地将组件作为道具传递，使其可设置样式

<BaseWidget icon={Icon1} />

在您收到的地方：

import styled from "styled-components";

const StyledIcon = styled.i``;

const BaseWidget = (props) => {
  const { Icon } = props.icon;
  return (
    <StyledIcon as={Icon} />
  );
}

从“样式化组件”导入样式化；
const StyledIcon=styled.i`；
const BaseWidget=（道具）=>{
const{Icon}=props.Icon；
返回(
);
}

---

什么是道具图标？实际上并不清楚，因为它在代码中看起来是一个stringprops。图标是上面声明的组件之一：Icon1、Icon2或Icon3