Next.jsに新しくなったMUI(Material-UI v5)とEmotionを導入して新機能を試す | ZUMA Lab
Material UI の v5 がリリースされました。 v5 から MUI として新しくリニューアルされました。 公式サイトもリニューアルしていますね。 v5 から内部で使用されているスタイリングソリューションが Emotion か styled-components か選択できます。 今回は Next.js/Typescript プロジェクトに Material-UI/Emotion を導入します。 また今回から新たに追加された MUI の新機能や変更された記述方法を試してみます。 今回ソースは基本的には公式 Github の example を参照致しました。 環境macOS Big Sur 11.15.2Next.js 11.1.2Typescript 4.4.3npm 7.7.6yarn 1.22.4Next.js のプロジェクトを作成以下のコマンドを実行して Typescrip
Emotion – Introduction
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported. There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React. Fr
【React】Emotionの使い方【基本から応用まで解説】 | RalaCode
「React開発でEmotionを導入したい」 「styled-componentsより使える？」 「TypescriptでEmotionを使いたい」 「Emotion使ってみたけど、なんかCSSが適用されないんだけど...」 上記の悩みにお答えします。 「Emotion」はJavaScriptでCSSを記述するために作られたライブラリで、いわゆるCSS-in-JSのひとつです。 同じCSS-in-JSの中で、「styled-components」というものがあります。 Emotionとstyled-componentsはよく比べられますよね。 Emotionを使うべきなのか、どうやって使えばいいのか悩んでいる方も多いはず。 そこで、この記事ではReactでEmotionを使う方法を解説します。 内容は以下です。 Emotionを使うメリット Emotionの導入 基本的な使い方 応用的な
ReactUIコンポーネント Mantineはいいぞ
Mantineとは ReactUIコンポーネントライブラリと聞くとChakra UI、MUIあたりが有名でしょうか。Tailwind使ってる人も多いと思います。 ここでは最近人気のMantineを紹介したいと思います。 Mantineはrtivital氏がメインとなって開発しているReactコンポーネントライブラリで、Githubのスターは約15,000あります。 スペックとしては TypeScriptベース(逆にいうとtsxじゃないと動かない) 豊富なコンポーネントとhook ダークモード対応 Next.jsに公式対応 メリット コンポーネントとhookが豊富 TOPページにもありますが、すでに100 120種類以上のコンポーネントが実装されており、なおかつアップデートで増えつつあります。（記事書いた翌日に公式が更新してました！ 他のReactコンポーネントライブラリと比較すると後発です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Emotion – CacheProvider
