对带样式的构件使用材质图标 [英] 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屋！