Styled Components API snippets

styled-components-snippets.jsx

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
  :hover {
    color: red;
  }
`;

// attrs, props, &

const Thing = styled.div.attrs({ 
  tabIndex: 0,
  margin: props => props.size || "1em",
})`  
  color: ${props => props.divColor || "palevioletred"};

  .something {
    border: 1px solid; // an element labeled ".something" inside <Thing>
  }

  &.foo {
    background: orange; // <Thing> tagged with an additional CSS class ".foo"
  }
`;

// Components className

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  font-size: 1em;
`;

const TomatoLink = styled(StyledLink)`
  color: tomato;
`;

// Polymorphic style

const BlueThing = styled.div`
  color: blue;
`;

<BlueThing as="span" />
<BlueThing as="a" /> 
<BlueThing as={MyComponent} />


// Component selector

const Link = styled.a`
  background: papayawhip;
`;

const Icon = styled.svg`
  transition: fill 0.25s;
  ${Link}:hover & {
    fill: rebeccapurple;
  }
`;

// Objects

const Foo = styled.div({
  color: "rgb(97, 97, 97)",
});