Styled Components Best Practices
When working with multiple developers on one React application, it's always good to align the team on a common set of best practices. This holds also true for styling React components. Over the past years, I was fortunate to work with many React freelance developers on different applications where we had to align the best practices throughout the project. While there were certainly applications st
Demystifying styled-components
When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w
styled-components の :&>before(記号) まとめ
styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS
ブログに CSS in JS 環境下での スタイル分離リファクタリングを施してみた
そろそろブログを大幅に改修しようと思っており、その前準備をしてリファクタリングをしていました。 具体的には css modules からの脱却と、スタイル周りのリファクタリングをしていました。 そのとき、経年劣化に耐える ReactComponent の書き方 と styled-components の採用と既存資産を捨てた理由 という記事を参考にしました。 これらは styled を一つのコンポーネントに当ててその中で SASS 記法で中にスタイルを当てていくというもので、CSS in JS 環境下において、styled と DOM を分離するテクニックとして学びがあるものでした。 僕は styled-compoennts ユーザーですが、styled-components の採用と既存資産を捨てた理由でも触れられているように、 styled なラッパーコンポーネントとかがいっぱい作られ
【React】styled-components を試してみる！ - mlog
今回は styled-components を試してみたい と思います。 ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います。 styled-components と chroma.js の詳細については、以下のページを参照してください。 それでは早速、styled-components と chroma.js を試していきたいと思います。 目次 目次 Reactセットアップ 必要なパッケージのインストール 「 styled-components 」と「 chroma-js 」を試してみる src/index.tsx src/packages/Sandbox.tsx src/packages/SampleButton.tsx 実際に動かしてみる まとめ Reactセットアップ TypeScript が慣れているので、惰性で typescript テンプレートを
styled-componentsへの最近の感想 - saneyuki_s log
今の職場で既に組まれたシステムが既にstyled-componentsにべったり依存していて、別に積極的に入れ替える理由もないので普通に使っているけれども、やっぱりこれ微妙だなと思った話。 そもそもとして、ビルドシステムへの介入が多くて不必要にロックインになったり、提示されてる手法がだいたいイマイチで普通にCSSとかSCSSを書く以上の意義が見出せないので、僕は基本的に「JS中にCSSを書いたり、ES Moduleのimportを使ってCSSを読み込むタイプのアプローチ（以下CSS-in-JS）」がそんなに好きではない・大人しくCSS書く方が好きではあるんだけど。色々あった理由はこちら: https://saneyukis.hatenablog.com/entry/2019/02/28/022750 https://saneyukis.hatenablog.com/entry/2019/0
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
styled-components の theme型定義 - Qiita
styled-components の theme、使っていますか？styled-components には、ThemeProviderという、装飾などに関する規定値を提供する仕組みがあります。この様な構成になっているとします（通常 ThemeProvider は SPA ルーティングの上あたりに位置しますが、説明のため簡易な構成としています） const Component: React.FC = () => ( <ThemeProvider theme={theme}> <RedButton>RedButton</RedButton> <GreenButton>GreenButton</GreenButton> <BlueButton>BlueButton</BlueButton> </ThemeProvider> )
Strongly typed theme property · Issue #1589 · styled-components/styled-components
Hi, I am using TypeScript and ThemeProvider for my components, and I had a couple of questions: First of all, my components are created using map, so I used to assign a key to each one, now I have put ThemeProvider to be the top parent component, and hence I need to set the key on that. I was just wondering does it hurt to do this? Or should I find a way to create a single ThemeProvider? Since I'm
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
Announcing styled-components v5: Beast Mode 💪🔥
EJ: Updated January 13, 2020 with the formal v5 release. We are very excited to announce that the styled-components v5 is here! There are no breaking changes*, as long as your app is running the latest version of React, styled-components v5 should just work. ✨(*however we did remove the deprecated “subfunctions on attrs” API) Please try the release in your apps and let us know if you encounter any
5.0 Roadmap · Issue #1934 · styled-components/styled-components
5.0 milestone rewrite stylesheet + tag classes for the needs of today ([WIP] Implement new sheet logic #2522) move react-is to peer dependencies (move react-is to peerDeps #2187) use react v16.7+ hooks to simplify the context consumer architecture (Reimplement StyledComponent using hooks (continued off #2349) #2390) babel 7 migration (maybe... there were bundle size regressions before) (Clean up d
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への振る舞いの後付け」というスク
CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog
CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出された。 ある程度の期間を経ていくつかの着目すべきアプローチが見えてきた。これから僕はどのようにセレクタと関わっていくべきかという視点で記してみたい。 擬似スコープ 通常CSSのセレクタにはスコープはないが、HTMLやCSSにハッシュ値を付与して特定のコンテキストを擬似的に閉じてしまおうというアイデア。実装としては、Vue.jsの単一ファイルコンポーネント、Angularのコンポーネントスタイル、styled-jsxなど。関連するウェブ標準技術としてShadow DOMがある。 例え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
styled components documentation日本語訳①ーBasicsー - Qiita
Tree shaking · Issue #478 · styled-components/polished
styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています)