エンジニアスタンプラリー～フロントエンド編＃9
2675 ワード
企画主旨
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
Author And Source
この問題について(エンジニアスタンプラリー～フロントエンド編＃9), 我々は、より多くの情報をここで見つけました https://qiita.com/tonchan1216/items/50c67105fcef5505e557著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .