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元素，该元素无法从另一侧使用带样式的组件进行样式设置，因为它不是组件。要设置组件的样式，它需要以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

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

1 个答案: