【閉鎖しました】個人的に「コレ!」なモノやコトを紹介するブログサイトです。
![コレ棚](https://cdn-ak-scissors.b.st-hatena.com/image/square/405e7874fe2408b1015539290a088f0de72e341a/height=288;version=1;width=512/https%3A%2F%2Fimages.prismic.io%2Fkoredana%2F1d959177-dff1-413c-9ade-5e181509705e_vite-reactjs-emotion.png%3Fixlib%3DgatsbyFP%26auto%3Dcompress%252Cformat%26fit%3Dmax%26rect%3D0%252C44%252C980%252C613%26w%3D800%26h%3D500)
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
2021年9月16日に MUI (Material-UI) v5 が正式にリリースされました。Material-UI v4 のリリースが 2019年3月なので、約2年半ぶりのメジャーアップデートです。正式名称が Material-UI から MUI に変更になり、パッケージ名も @material-ui/* から @mui/* になりました。 MUI v5 ではコンポーネントのスタイリングの実装方法や記法が一新し、Material-UI v4 以前までの独特な記法から、Theme UI、chakra などで用いられている sx Prop によるスタイリングになりました。 大幅な変更になるので、v4 からの移行コストは大きいですが、新たに MUI を学ぶ人には優しくなった印象です。 MUI v5 のスタイリング方法を v4 の記法と比較しながら紹介していきます。 Introducing MU
React調べること多すぎ・・・🤯 今回はReactのCSSスタイルついて調べてみました。 まとめ いきなりまとめです。 ReactのCSSスタイルについての結論 これといった正解はない。 将来どうなるかはわからない。 今のメンバのスキルセットで、使いたいものを使えばいいんじゃないだろうか? ということで、React(Vite + TypeScript)のCSSスタイルについて調べて、Emotionに流れ着いた経緯と、Emotionの導入方法についての記事です。 主要なもの 2022年2月24日時点で、ザクっと調べた主要なものです。 マイナーなものを含めるともっとありますが、今回は主要な以下の8つから選択します。 Inline Styles Css Modules Styled JSX Styled Components Emotion Linaria Tailwind CSS Wind
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く