Why we use CSS-in-JS 4

Navigation.jsx

import React from 'react';
import { Translate } from 'react-redux-i18n';

import { Header, Logo, Menu, MenuItem, Spacer } from './styles';

const Navigation = ({ email }) => {
  return (
    <Header>
      <Logo name="logo-small" fill="primary" color="primary" size="large" />
      <Menu>
        <MenuItem to="/payments" activeClassName="isActive">
          <Translate value="shared.header.payments" />
        </MenuItem>
        <MenuItem to="/change" activeClassName="isActive">
          <Translate value="shared.header.change" />
        </MenuItem>
      </Menu>
      <Spacer />
    </Header>
  );
};

export default Navigation;