刚开始玩Styled Components。有没有办法设计第三方图标,如材料设计图标?这是我到目前为止的代码,但显然它不起作用。 相对代码位于内容组件谢谢!
const MaterialIcon = (props) => <i className="material-icons">account_balance</i>;
const Icon = styled(MaterialIcon)`
background-color: green;
font-size: 50px;
`;
const CheckThisOut = props => (
<Wrapper>
<Header>
<h5>{props.title}</h5>
<Icon />
</Header>
<Divider />
<Content>
<p>5% of all participants in this campaign were first time users.</p>
</Content>
</Wrapper>
);
export default CheckThisOut;
答案 0 :(得分:2)
要使styled(AnyComp)
符号工作AnyComp
,需要接受传入的className
道具并将其附加到DOM节点。
要使您的示例工作MaterialIcon
必须使用传入的className
,否则会注入样式但不会定位DOM节点:
const MaterialIcon = (props) => (
<i className={`material-icons ${props.className}`}>account_balance</i>
);
// WORKS
const Icon = styled(MaterialIcon)`
background-color: green;
font-size: 50px;
`;
有关详细信息,请参阅我们的documentation page about styling any component!
答案 1 :(得分:1)
我知道这是一篇旧帖子,但这是将其写成单个表达式的另一种方式。使用样式组件的 .attrs()
(see docs) 作为类名,使用 CSS ::after
选择器作为图标名。
const ThumbUp = styled.i.attrs(() => ({ className: "material-icons" }))`
background-color: green;
font-size: 50px;
&:after {
content: "thumb_up";
}
`;
以更通用的方式编写它可以让您将其用于任何可用的图标。这利用了样式化组件根据道具进行调整的能力(有关详细信息,请参阅 styled components docs)。
const MaterialIcon = styled.i.attrs(() => ({ className: "material-icons" }))`
background-color: green;
font-size: 50px;
&:after {
content: ${props => props.iconName || "help"};
}
`;
然后你可以像这样使用:
<MaterialIcon iconName="check" />