Hatena Blog Tags
はてなブログ トップ
styled-components
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

styled-components

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
asoview! Tech Blog•1年前

共通コンポーネントの開発環境にStorybook 7とViteを導入しました

こんにちは。アソビュー！Advent Calendar 2023の14日目（B面）の記事です。 技術本部プロダクト部マーケットプレイスユニットのkaorun343です。フロントエンドエンジニアのチームでは継続的に開発環境の改善活動をおこなっています。今回はこの活動において実施した、共通コンポーネントの開発環境改善について紹介します。 背景 アソビュー！では複数のアプリケーションを開発・運用しており、それらのフロントエンド実装を別個で行う必要があります。 これらのアプリケーションで共通のUIコンポーネントを利用できるように、共通コンポーネントパッケージを用意しています。 共通コンポーネントはRe…

#Storybook#Vite#styled-components

関連ブログ

忘却のTech•3年前

Gatsby.jsでbuildしたときにStyled-Componentsのスタイルが適用されないときの解決方法

Gatsbyでサイトを作成中、一旦ビルドして確認しようと思っていたら、Styled-Componentsが適用されないという事件が発生しました。 gatsby developでは問題なかったので、大丈夫だと思っていたのですが、、、 このIssueの内容を読んで解決しました。。 github.com 解決 私の場合、Styled-ComponentsのGatsbyプラグインを入れていなかったので、それをgatsby-config.jsに設定して解決できました。 （存在を知らなかった） babel-plugin-styled-componentsもお忘れなく。 www.gatsbyjs.com 数…

#GatsbyJS#styled-components
asoview! Tech Blog•3年前

styled-componentsで動的にthemeを切り替える

こんにちは！アソビューでフロントエンドエンジニアをしている野口です。 先日、特定の条件の場合のみ通常とは異なるスタイルを適用させなければならない場面がありました。その際に、APIのレスポンスをもとにstyled-copmonentsのtheming機能を使って動的にthemeを切り替える実装を行ったのでそれについて書いていきます。使っている技術はおもに以下で、SPAのアプリケーションです。 - React.js - TypeScript - Style - styled-components - css modules（徐々にstyled-componentsに置き換えている） Theming…

#react#TypeScript#styled-components
青いやつの進捗日記。•3年前

styled-componentsですごい頻度でpropsを更新し続けていたらattrsメソッドを使えと怒られた

react_devtools_backend.js:2842 Over 200 classes were generated for component Seekbar__Preview with the id of "Seekbar__Preview-sc-16onun1-1". Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { …

#styled-components#react
READYFOR Tech Blog•4年前

React のフォーム向けに ESLint プラグインを作った話

こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 最近 React のフォームライブラリとして React Hook Form を社内で採用することになり、コントリビュートしている身としてはかなりテンションが上がっております 🙌 話は変わりますが、先日 eslint-plugin-react-form-fields という ESLint プラグインを公開しました 🎉 published 🎉kotarella1110/eslint-plugin-react-form-fields: React Form Fields specif…

#ESLint#form#react#styled-components
青いやつの進捗日記。•4年前

styled-componentsでforwardedAsを使ってコンポーネント拡張した上でタグを変更する

qiita.com <EventButton forwardedAs="p"> dummydummy </EventButton> const EventButton = styled(Button)` width: 320px; height: 53px; ` ↑pages/page.tsx export const Button = (props: Props, as: any) => { <Container forwardedAs={as} > const Container = styled.button`` ↑Button.tsx これで、buttonタグで作られているforwar…

#styled-components#react
asoview! Tech Blog•4年前

Reactとともに使ってきたCSS環境の変遷を振り返る

これはアソビュー Advent Calendar 2020の5日目です。 こんにちは、アソビュー！のフロントエンドエンジニア、テックリード井上です。PS5は買えました。蜘蛛の糸でNYをビュンビュン飛んでます。 さて、弊社ではアソビュー！やその他の大後のアプリケーション開発のフロントエンドのUIフレームワークとしてはReactを活用しています。おそらくReact触ってる人は一度は悩むであろう、css環境どうするか問題。今回はこちらについて書きたいと思います。 はじめに 私がジョインしたのは約3年前ですが、そこからフロントの基盤は色々とブラッシュアップを続けており、特にcss環境についてはその場の…

#react#styled-components#CSS
青いやつの進捗日記。•4年前

styled-componentsの何回も見返したい参考記事【もはや自分用メモです】

ていうか今気づいたのですが、styled-componentではなくstyled-componentsなんですね。s足りてなかった。今の今まで勘違いしていた。今までのタグとカテゴリ直したい。 概要、できることの説明 qiita.com いろいろなパターンでの使い方、書き方の参考になります styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています) · GitHub styled-componentsのアップデート早いのですかね、記事で書いてある書き方がv3の書き方だったりします。extendとか。v4で廃止になってるらしいので…でももう今v5…

#styled-components