タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
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まで幅広く公私とも
今回は 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 テンプレートを
【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発
1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styledの開発に取り組みました。 2. extract-styledの紹介 実装したextract-styledは、以下のようなCLI経由の実行を通して、styled-componentsで定義されたReactコンポーネントをtargetに指定した任意のCSS in JSに変換することができます。(現時点では変換先としてlinaria・vanilla-extractに対応) $ extract-styled \\ --path ./src/compon
今の職場で既に組まれたシステムが既に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
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
弊社では現在UIコンポーネントのスタイルを当てるために、CSS-in-JSライブラリのひとつであるstyled-componentsを使っています。 styled-componentsで高度な使い方をしたときにスタイルが意図した優先度で当たらない現象の調査のためにstyled-componentsの仕組みを調べたので、覚え書きとして残しておきます。 前提知識styled-componentsについて: CSS-in-JS はスタイル定義をJavaScript内に書く手法の総称です。スタイルのコンポーネント間の結合を下げ、単一コンポーネント内の振舞いとスタイルの凝集を上げる狙いがあり、特に振舞いに依存して動的にスタイルが変わるようなケースでJSとスタイル定義をシームレスに結合させることができます。実際の実現方法はライブラリによってまちまちです。styled-componentsは比較的オーソ
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる何がしたかったかこういう Chakra UI みたいな書き方がしたかったので、styled-components でやれるかを試したのが今回の記事の主題です。 export default function App() { return ( <VStack spacing={4} w="100vw" h="100vh" px={4} py={8} bgColor={palette.white
この記事はStyled Componentsの微細な好みに関するものであり、Styled Componentsで構成されたプロジェクトをリファクタリングすべき等の考えはありません。 Styled ComponentsはCSS in JSの先駆けとなり、この手のツールではトップクラスの人気である覚えがあります。ですが、実のところあまり濫用されて欲しくない気持ちを抱いています。 特記事項 CSSやReactの初学者向けではありません。 この記事は以下の是非を問うものではありません。 CSS in JS / Plain CSS CSSファイルを分離する / 分離しない テンプレートリテラル / Object Style CSSコードのスタイル はじめに Styled Componentsについて Styled Componentsというライブラリは、styled.div...のようなAPIを持つ
styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS
GitHub - ben-rogerson/twin.macro: 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
The styled-components Happy PathMy personal suite of “best practices” For a few years now, my #1 favourite tool for managing CSS in React apps has been 💅 styled-components. It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React! It shares something else in common with React: developers often disli
GitHub - danielbayerlein/dashboard: 📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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
GitHub - styled-icons/styled-icons: 💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I like working with styled-components. They allow you write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who loves to dissect a web page and break it down into reusable components, the idea of styled-comp
Sometimes the libraries that we use daily can seem a little bit like magic. By taking the time to understand the fundamental JavaScript features that make these libraries possible, we become better equipped to improve our use of those libraries, applying their functionality in unique and relevant ways. Sometimes the libraries that we use daily can seem a little bit like magic. By taking the time t
[TailwindCSS] Next.js+TypeScript+styled-componentsの環境にTailwindCSSを導入する - Qiita
// postcss.config.js const purgecss = [ '@fullhuman/postcss-purgecss', { content: ['./components/**/*.js', './pages/**/*.js'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], }, ] module.exports = { plugins: [ 'postcss-import', require('tailwindcss')('./tailwindcss-config.js'), 'autoprefixer', ...(process.env.NODE_ENV === 'production' ? [purgecss] : []), ], }
![[TailwindCSS] Next.js+TypeScript+styled-componentsの環境にTailwindCSSを導入する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c444722b65bf9363af1f3512e701ba02cfc1c5f2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVGFpbHdpbmRDU1MlNUQlMjBOZXh0LmpzJTJCVHlwZVNjcmlwdCUyQnN0eWxlZC1jb21wb25lbnRzJUUzJTgxJUFFJUU3JTkyJUIwJUU1JUEyJTgzJUUzJTgxJUFCVGFpbHdpbmRDU1MlRTMlODIlOTIlRTUlQjAlOEUlRTUlODUlQTUlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWUzNjk5NDUxYWRiN2I0MTMwNjZkMjE4ZGNmZmZkOWYy%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYWNvbG9saWRvbGwmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTczNTc2MWI1YWIxODExMzc3N2ZlNzQxY2M4YzdhYjdj%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D24bf499757ee92075cb08e027730b0fa)
styled-componentsの基礎知識 第1回 styled-componentsの前提知識 このシリーズではCSS in JS用のライブラリであるstyled-componentsについて解説します。第1回目はCSS in JSの予備知識と、styled-componentsの使いどころや、基本機能について解説します。 はじめに styled-componentsは、ReactコンポーネントにCSSのスタイルをどのように当てるかという課題をきっかけに作られたCSS in JSのライブラリです。 CSS in JSは読んで字のごとく、JavaScriptの中にCSSの記述を取り込んでしまう手法のことで、styled-componentsのほかにもglamorous、Emotion、Linariaなどのライブラリが存在します。 次の図はstyled-components、glamoro
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> )
Release v6.0.0 · styled-components/styled-components
Changed in this version fix(types): prevent prop bleed on styling properties (fixes #4053, c0f8015) feat(types): ship csstype via "CSS" namespace (e6c4f0a) chore: bump stylis to 4.3 (fixes #4007, fa58875) reduced some sources of unnecessary branching logic Breaking changes in v6 Migration guide → https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6 now using stylis v4 (if
React.jsのスタイル設定の基礎とStyled Componentsの使い方 React.jsの基本的なスタイルを設定方法と、Components Styled というライブラリを使用したスタイルの設定方法を解説します。 投稿日2019年12月17日 更新日2019年12月17日 環境は React 16.12 のTypeScriptでお送りします。 インラインスタイルで設定する方法 一つ目はHTMLタグのスタイル属性に直接書くインラインスタイルの設定方法です。 通常のHTMLコーディングはちょっと邪道っぽくてあまり使わないかもしれませんが、Reactアプリケーションのサンプルとかには結構使われています。 JSXでインラインスタイルを設定する場合は、JavaScriptのオブジェクト形式で記述します。 JSXで式や変数を表示する場合は波括弧（{}）で囲み、スタイルはオブジェクトで記述す
styled-components: Basics
Motivation styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users. Apart from the improved experience for developers, styled-components provides: Automatic critical CSS: styled-components keeps track of which components are re
styled-components v6 リリースなど: Cybozu Frontend Weekly (2023-07-04号)
styled-components v6 リリースなど: Cybozu Frontend Weekly (2023-07-04号) はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/07/04 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boshen/oxc Linter Roadmap oxc の linter 実装についてのロードマップです。 bike-shedding になりがちな style や convention 以外のルールにフォーカスして、この２ヶ月で実装していくそうです。 プラグインは GraphQL のような
React で CSS のあて方（モジュール・styled-jsx・styled-components・Emotion）
css でスタイルを設定する方法はいくつか用意されておりライブラリも色々あります。 その中から良く使われている以下の5つの方法を紹介します。 インラインで指定 モジュールを使う方法 styled-jsx (CSS in JS) styled-components (SCC in JS) Emotion デフォルト（インライン） Reactでデフォルトで提供されている方法。 キャメルケースで変数名を宣言しCSSをオブジェクトで書いてインラインで指定。 export const InlineStyle = () => { const containerStyle = { border: "solid 2px #329eff", borderRadius: "20px", padding: "8px", margin: "8px", display: "flex", justifyContent
【React】流行りのstyled-componentsとは？
Reactでスタイリングする際に人気のライブラリーはstyled-componentsなのではないでしょうか。 事実、githubでは31.8kものStarをもらっています。しかし、まだまだ使ったことないという人が多いのが現実です。 styled-componentsについて知らない方も多いので、使うメリットや基本的な使い方について見ていきましょう。 styled-componentsとは？ CSS in JSのライブラリの一つです。CSS in JSとはその名の通りJSの中にスタイルを記述する方法。 このCSS in JSを使うことでReact思想のコンポーネント単位での管理がスタイルにも可能になります。従来はJSとCSSで分けられていたものが、CSS in JSで統合できたためです。 styled-componentsを使うメリット styled-componentsを使うメリットは主
華麗なるGatsby.jsの実践(styled-components/headの編集/404ページ/画像の使用) - Qiita
以前 gatsbyの公式チュートリアルを意訳しつつやったので、今回は、実際に業務で使用するにあたって 使いそうな機能について公式のドキュメント等を調べてみました。 この記事のタイトルをつけた後に気づいたんですが、 公式で上記の画像を発見しました。 華麗なるギャツビーがやはり由来なんでしょうか。 お品書き 実際業務で使いそうな機能をピックアップしたところ、以下のようになりました。 - styled-componentsを使いたい - head修正できるようにしたい - 404ページをカスタマイズしたい - gatsbyでの画像の扱いを知りたい 今回はhttps://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-default/ このスターターを使って進めます。 スターターを使用するために、以下のコマンドを実行します。 $ gatsby n
GitHub - tvillarete/ipod-classic-js: An iPod Classic emulator that connects to Apple Music and Spotify. Built with React & Styled Components
Before the days of streaming services, we relied on physical devices to store our limited libraries of music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the iPod Classic you used to own that now connects to Spotify and Apple Music — the two mo
React + Typescriptプロジェクトでplugin-styled-componentsを使うときの設定 - じまろぐ
styled-components使ってる env !== "production" のときにクラス名にファイル名が入るようにしたい デバッグのため babel-plugin-styled-componentsがある TypeScriptだとこのプラグインは効かない ts-loaderでトランスパイルしてるから storybookでも使いたい という感じで、ts-loaderを使ってるのでTypeScriptプロジェクトの場合は typescript-plugin-styled-components を使う必要がある。babelでやってる場合は babel-plugin-styled-components で大丈夫なはず。 設定 webpack.config.js で ts-loaderのoptionを設定する。 const path = require("path"); const cr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】styled-components を試してみる！ - mlog
styled-componentsへの最近の感想 - saneyuki_s log
Demystifying styled-components
styled-componentsの仕組みについての覚え書き | Wantedly Engineer Blog
Styled Componentsを無闇に使わないで
styled-components の :&>before(記号) まとめ
The styled-components Happy Path
Styled Components Best Practices
DRY-ing Up Styled-components | CSS-Tricks
Styled Components, Styled Systems and How They Work
styled-componentsの基礎知識 | 第1回 styled-componentsの前提知識
styled-components の theme型定義 - Qiita
React.jsのスタイル設定の基礎とStyled Componentsの使い方
How we migrated 541 components from Styled Components to Emotion with zero bugs
news.yahoo.co.jp
www.asahi.com
www.gaji.jp
anond.hatelabo.jp
ds.yahoo.co.jp
gulun.jp