Using Material Icons with Styled Components

For the styled(AnyComp) notation to work AnyComp needs to accept the incoming className prop and attach it to a DOM node.

For your example to work MaterialIcon has to use the passed in className, otherwise the styles are injected but no DOM node is targeted:

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 documentation page about styling any component for more information!

Tags:

Styled Components

Related