Naming Styled Components

componentSyntaxError.jsx

const Navigation = styled.div`/* styles */`;

const Navigation = () => (
  <Navigation />
);
// => JS interpreter: "I can't believe you've done this x_x"

componentTraditional.jsx

import Header from 'Components/Header';

const Navigation = () => (
  <div className="Navigation">
    <Header>{headerContent}</Header>
    <div className="Navigation__Content">{content}</div>
  </div>
);

componentV1.jsx

import Header from 'Components/Header';
import { Wrapper, Content } from './styles';

const Navigation = () => (
  <Wrapper>
    <Header>{headerContent}</Header>
    <Content>{content}</Content>
  </Wrapper>
);

componentV2.jsx

import Header from 'Components/Header';
import { StyledNavigation, Content } from './styles';

const Navigation = () => (
  <StyledNavigation>
    <Header>{headerContent}</Header>
    <Content>{content}</Content>
  </StyledNavigation>
);

componentV3.jsx

import Header from 'Components/Header';
import * as S from './styles';

const Navigation = () => (
  <S.Navigation>
    <Header>{headerContent}</Header>
    <S.Content>{content}</S.Content>
  </S.Navigation>
);

componentV4.jsx

import Header from 'Components/Header';

const S = {};
S.Navigation = styled.div`/* styles */`;
S.Content = styled.div`/* styles */`;

const Navigation = () => (
  <S.Navigation>
    <Header>{headerContent}</Header>
    <S.Content>{content}</S.Content>
  </S.Navigation>
);