将材质图标与样式化的组件一起使用

Question

刚刚开始使用样式化组件。有没有办法设置第三方图标（例如“材料设计图标”）的样式？这是我到目前为止的代码，但显然无法正常工作。相对代码位于内容组件下方，谢谢！

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;

Answer 1

要使styled(AnyComp)表示法起作用，AnyComp需要接受传入的classNameprop 并将其附加到 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;
`;

有关更多信息，请参阅我们关于为任何组件设置样式的文档页面！