对带样式的构件使用材质图标 [英] Using Material Icons with 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;
推荐答案
要使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!
这篇关于对带样式的构件使用材质图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文