刚刚开始使用样式组件。有没有办法设置第三方图标(例如 Material Design Icon)的样式?这是我到目前为止的代码,但显然它不起作用。相关代码位于内容组件下方 Thanks!
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;
For the styled(AnyComp)
工作符号AnyComp
需要接受传入的className
prop 并将其附加到 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;
`;
See our 有关任何组件样式的文档页面 https://www.styled-components.com/docs/basics#styling-any-components了解更多信息!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)