使用带有样式组件的材质图标

时间:2017-08-31 01:04:15

标签: styled-components

刚开始玩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;

enter image description here

2 个答案:

答案 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" />