Emotion Avatar


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.

InstallGetting Started
const Link = styled.a`
	min-width: 12rem;
	margin: 0 auto 20px;
	padding: 16px;
	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;