Styling any component

The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.

.styledLink {
  color: palevioletred;
  font-weight: bold;
}

import styled from '@helloinnovation/styled'
import styles from './styles.module.css'
 
// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>{children}</a>
)
 
const StyledLink = styled(Link)(styles.styledLink)
 
render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)

Extending styles Passed Props