エンジニアスタンプラリー～フロントエンド編＃9

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

CSS in JS
スタイルすらコンポーネント化するJSの強欲さ。
オレンジ項目だが、軽く触れていく。

CSS in JS

Styled Components

黄色テーマの1つであるStyled Componentsを選択。
公式資料のGetting Startedとして、Styled-components: Basicsの記事を参考にした。
SASSで作ったスタイルをひたすら移行する。

TopBar.js

const Title = styled.h2`
  margin: 0;
  padding: 20px 0;
  text-align: center;
  background-color: ${props => (props.status === 'active' ? '#ffffd9' : 'white')};
`;

const Button = styled.button`
  border: none;
  background-color: inherit;
  text-align: center;
  width: 100%;
  height: 120%;
  :hover { text-decoration: none; }
`;

成果物

ただインポートするだけじゃなくて、JS内にスタイルを定義できた。
コードとしての視認性は高い気がする。
https://tonchan1216.github.io/WDR-frontend/v9/
https://github.com/tonchan1216/WDR-frontend/tree/v9.0