styled-components を試す - アカベコマイリ
これまで React における CSS 定義に CSS Modules を採用していた。しかし css-loader でサポート廃止が検討されているようだ。また CSS Modules の対抗馬である CSS in JS 系の使用感にも興味があったので代表格とおぼしき styled-components を試すことにした。 例によって実験対象は akabekobeko/examples-electron とする。 環境構築 必要な npm をプロジェクトに追加する。@types/styled-components は開発時にだけ必要なので -D にしておく。 $ npm i styled-components $ npm i -D @types/styled-components typescript-styled-plugin
styled-componentsで再利用可能なグリッドレイアウトを作る - Qiita
やること Reactでコンポーネントを組み立ててUI作っていくのも楽なんですが、 styled-componentsでグリッドレイアウトのコンポーネントを作って、 それらを組み合わせて使うと非常に楽だということに気がつきました。 一度作ったやつを取っておけば再利用することもできますし styled-componentsで書いたcssの記述も整理しやすいですし、おすすめです。 GitHub参考 => https://github.com/yutaro1204/styled-components-demo 前提 ・styled-componentの使い方 ・CSSでのdisplay: grid;の使い方 TypeScriptでReactのコンポーネントを書いていきますので、tsxを使います。 導入 まず気楽にcreate-react-appを使います。
styled-componentsで変わるReactコンポーネントのスタイリング
Reactアプリの開発でちょっとやっかいなのが、スタイルシートの扱いです。さまざまな手法の中から、いま注目のstyled-componentsを使った方法を紹介します。 Reactによるアプリケーションの構築手法は標準化がだいぶ進んでいます。しかし、「スタイリング」においては標準的な実装方法がまだ定まっていません。それぞれの方法に長所と短所があり、どれがベストか言えない状況です。 この記事では、ReactコンポーネントにおけるWebアプリケーションのスタイリングがどこまで進歩しているかを解説します。また、styled-componentsについて簡単に紹介します。 JavaScriptにおけるスタイリングの進化 CSSは1996年のリリース以降、あまり大きく変わっていません。メジャーリリースを3回実施し、4度目のリリースが進められている現在まで、CSSは新たな機能を追加することで成長し続け
styled-componentsを使った雑なReact Presentational Componentの書き方 - Qiita
最近、仕事でReactを書く機会が多くなってきて色々試しているうちに書き方が落ち着いてきました。 [注意] 本来はクラス毎にStyledComponentsのインスタンスを作った方がいいです。自分がVueライクな感じで雑に書くための記法です。 この表記ですと、子コンポーネントに同じクラス名があたったときに、親コンポーネントのスタイルが当たるので完全なscopedなスタイルにはなりません。 （@nabeliwoさんにコメントいただきました。ありがとうございます！） 既にHTMLが存在しているときに雑にReactに移植するときの途中段階とかで役立つ書き方です import React from 'react' import styled from 'styled-components' const TodoItem = ({ className, title, description, onD
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
Since the beginnings of the Internet we’ve always had the need to style our websites, CSS has been around forever and has evolved at its own pace over the years, this article will take you through it. To begin with we need to be on the same page of what CSS is, I think we can all agree that css is used for describing the presentation of a document written in a markup language. It’s no news that CS
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
これからのReactコンポーネントのスタイリングはstyled-componentsが良さそう - Qiita
前々回のprettierと前回のflowに引き続きReact Confで紹介されてたものを使うシリーズ第3弾です。 styled-componentsはSassやRadium、CSS Moduleといったスタイル系ライブラリの問題を解決するために生まれた新しいライブラリで、今Reactコンポーネントのスタイリングをするならベストの選択肢なんじゃないかと思います。 追記 2017/4/2 - jestでのテストについて追記しました。 2017/5/26 - v2について簡単に記載しました。 styled-componentsとは styled-components 所謂CSS in JSの一種でjsx内に普通にcssが書ける。 キャメルケースとかせずにcssが書けるので、(複雑なことをしない限りは)移行が楽。 props渡したりテーマ作ったり、extendできたり機能豊富。 擬似要素やmed
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
