Why we use CSS-in-JS 3

styles.js

import styled from 'react-emotion';
import { NavLink } from 'react-router-dom';
import { Icon } from '@homelike/ui-kit';

export const Header = styled('header')`
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  padding: 0 ${({ theme: { spacing } }) => spacing * 2}px;
`;

export const Logo = styled(Icon)`
  display: block;
`;

export const Spacer = styled('div')`
  display: block;
`;

export const Menu = styled('div')`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
`;

export const MenuItem = styled(NavLink)`
  margin: 0 ${({ theme: { spacing } }) => spacing}px;
  height: 72px;
  line-height: 68px;
  font-size: ${({ theme: { fontSizeMedium } }) => fontSizeMedium};
  padding-top: ${({ theme: { spacing } }) => spacing * 0.25}px;
  color: ${({ theme: { gray4 } }) => gray4};
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  &.isActive,
  &:hover {
    border-top: 4px solid ${({ theme: { primary } }) => primary};
    padding-top: 0;
    text-decoration: none;
    color: ${({ theme: { gray1 } }) => gray1};
  }
`;