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; } } `