Please enable JavaScript.
Coggle requires JavaScript to display documents.
StyledComponents (メリット (JSとの連携 (lintとの連携, コンポーネントと値の共有), Styleのコンポーネント化…
StyledComponents
メリット
JSとの連携
lintとの連携
コンポーネントと値の共有
既存のCSS in JS
Styleのコンポーネント化
modifierをpropertyとして定義可能
styleとclassnameのmappingを省略
classNamesを考える時間の省略
テストもできる
テーマ全体
https://jamie.build/styled-theming.html
animationのconflictを避ける
参考
https://medium.com/@perezpriego7/css-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b
https://qiita.com/taneba/items/4547830b461d11a69a20
https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55?source=search_post---------1&gi=e50b8f42bf35
https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation
1st
cssファイルに記述
cssプリプロセッサーの利用
ex. css modules
ローカルスコープ
2nd
インラインスタイルへのemit
ex. Radium
疑似グラスが使えないなどの問題
render() スコープ内の変数が利用可能に
3rd
ex. glamor
styley要素へのinjection
Coponent内の変数が利用できない
4th
ex. style-components
3rdの発展形
Component内の変数が利用可能に
5th
render() スコープ内の変数が利用可能に
Sass代替
mixin
export
function
function
extend
sytyled
デメリット
SSR
隣接セレクタ使えない
機能
Styling any components
classNameを通すことでどんなコンポーネントでもスタイリングできる.
mixin/function
視点
ユースケース
CSS練度が低い場合
コンポーネントベースの設計に寄せたい場合
導入順序
最初から入れちゃう
あとから入れる
globalインジェクションが使える
詳細度をいじる
https://www.styled-components.com/docs/advanced#avoiding-conflicts-with-thirdparty-styles-and-scripts
Tips
既存CSSとの併用
ClassNamesを内包したコンポーネント
その他
Theming
tips
他コンポーネントの参照
https://www.styled-components.com/docs/advanced#referring-to-other-components