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

Chakra UI

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

【v2とv3を比較しながら】Chakra UI v3のコンポーネントカスタマイズ方法

第3チームのフロントエンドを中心に業務をしている赤星です。 弊社のOfferBoxでは一部に Chakra UI を利用しているのですが、先日Chakra UIのバージョンをv2からv3にアップデートした際にとてもアップデート作業に苦労しました。 Chakra UIのv3は大幅な破壊的変更があり、公式リファレンスもどのようにコンポーネントをカスタマイズするのか各コンポーネントごとに解説しなくなったのでここで詳しく説明していこうと思います。 コンポーネントカスタマイズ方法の変更（v2→v3） ChakraProviderの変更 extendThemeからcreateSystemへ コンポーネント…

#react#Chakra UI#frontend

関連ブログ

武器はひのきのぼう•6ヶ月前

Chakra UI2系でモーダル内がスクロールできない

Chakra UI2系を使ってモーダルを表示した時、モーダル内の要素がモーダルに収まらない時は通常であればスクロールができるようになるのだけど、スクロールできない場面に遭遇した。 まず初めに、Chakra UIのモーダルスクロールは2種類あって、scrollBehaviorで設定することができる。 詳しくはChakra UI公式ドキュメントのModal overflow behaviorを見ると書いてあるのだけど、insideでモーダル内のスクロール、outsideでモーダル外がスクロールするようになる。 デフォルトはoutsideになっている。 モーダルがスクロールできない 普通にモーダルを…

#Chakra UI#React 18
武器はひのきのぼう•6ヶ月前

Chakra UI3系を使えるようにするまで

いつの間にかChakra UI3がリリースされていたので、まずは適当に触ってみたメモ。 今回は Node.js Vite React TypeScript で試してみる。 Node.js、npmは入れている前提。 入っていなければnvmとかvoltaで入れる。 プロジェクトを作る Viteを使ってReactを入れるので、公式ページの通りにReactでセットアップする $ npm create vite@latest 途中でフレームワークと言語を聞かれるので、それぞれReactとTypeScriptを選ぶ。 ? Select a framework: › - Use arrow-keys. Re…

#Chakra UI#React 18
techtekt•2年前

Server Componentで作成したフォームをChakra UIで簡単にリッチにする #techtekt Advent Calendar 2023

はじめに パーソルキャリアに今年入社しました23卒エンジニアの熊切です。普段はSalariesで主にフロントエンドエンジニアを担当しております。今回は今年話題になったApp RouterのServer Componentについて触れようと思います。 App RouterはNext.js 13.4でstableとなった新たなルーター機構を指します。Server ComponentはApp Routerのベースとなる技術です。新しい技術として注目を集めていますが、その特性とMUI等のUIライブラリの相性が良くないため（理由は後述）、Server ComponentとUIライブラリの両方の利点を活か…

#techtekt Advent Calendar 2023#エンジニア#Server Component#Chakra UI#パーソルキャリア