Material-UI + Styled Componentsでスタイリングを少しでも楽に
コピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペで完結させたい…
って常に思ってる。とくにCSS。
細部の調整は必要でもできうる限り楽したい。
できうる限り何とかしてみた。
とはいうもののmaterial-UIもstyled components使った事無いので何回かに分けて使い方まとめる
今回は導入方法絞る
ざっくり説明
Material-UI
Google が提唱する Material Design に準拠したコンポーネントライブラリ
Material-UIのCSSの記述がオブジェクトスタイルがめんどくさい
Styled Components
CSS 記法のまま CSS in JSを行うことができるライブラリ
今回はこの二つを組み合わせて楽する
使い方
Material-UIのインストール
yarn add --save @material-ui/core @material-ui/icons
styled-componentsのインストール
yarn add --save-dev styled-components @types/styled-components babel-plugin-styled-components cross-env typescript-styled-plugin
上記の詳細は以下
- @material-ui/core
- material-uiのコアライブラリ
- @material-ui/icons
- Font Awesomeのmaterial-ui版 (要らないなら省く)
- @types/styled-components
- styled-componentsを使ってTypescriptを使うためのライブラリ。
- babel-plugin-styled-components
- styled-componentsのclass名を分かりやすくしてくれるライブラリ。
- cross-env
- MacとWindowsで同じコマンドで環境変数を設定するためのライブラリ。
- typescript-styled-plugin
- VS Code 上でテンプレート リテラル による CSS 定義の入力補完に必要。