Emotion Avatar

emotion

The Next Generation of CSS-in-JS

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

const Link = styled.a`
  min-width: 12rem;
  margin: 0 auto 20px;
  padding: ${props => (props.primary ? 18 : 16)}px;
  border-radius: 5px;
  text-decoration: none;
  border: ${props =>
    props.primary ? 'none' : '3px solid currentColor'};
  background: ${props =>
    props.primary &&
    'linear-gradient(90deg, #D26AC2, #46C9E5)'};
  color: ${props =>
    props.primary ? '#1D2029' : '#D26AC2'};
  &:hover {
    opacity: 0.95;
  }
  @media (min-width: 768px) {
    margin: 0 20px 0 0;
    &:last-child {
      margin: 0;
    }
  }
`