Google、「Material Design」のアイコンを「Figma」で公開／2,000以上ものアイコンが、5つのバリエーションで。商用も可
TypeScriptでMaterial-UIコンポーネントをカスタマイズして再利用する - Qiita
動機 Material-UI (MUI) のTypographyにいちいちparagraph属性を書くのが面倒なので、書かなくていいようにしたかった。 実例リポジトリ 方法1：テーマでコンポーネントのデフォルトプロパティを設定する コメントでkisaragiさんにで教えていただきました。MUIにはテーマでコンポーネントのデフォルトプロパティを設定する機能があり、そこでparagraph: trueとするとテーマ配下のコンポーネント全体にプロパティが適用されます。 次の例ではテーマオブジェクトに{props: { MuiTypography: { ... }}を設定しています。propsがデフォルトプロパティ設定を表すキー、MuiTypographyがコンポーネントのスタイル名を表すキーです。このスタイル名はAPIドキュメンテーションのCSSセクションか、直接ソースを参照して調べます。 co
React向けUIコンポーネントライブラリ、Material UI(v4)の紹介
注意書き あらかじめ言っておくのですが、今回はそこまで実践的なことは書いていません。 というのも、Material UI の機能を紹介するにしても、できることが多すぎてどこを抜粋するか悩んでしまったためです（苦笑） 公式ドキュメントを見ていただくとよくわかるのですが、あらゆる使用例、サンプルコード（JS、TS ともに）およびプレビュー表示が豊富に載っています。さらっと見ていくだけでも、こんなコンポーネントも用意されているのかと発見があって楽しいくらいです。 なので、提供されているコンポーネントに関しては、大まかな概要を紹介する程度にとどめます。 もし興味がわいた方はぜひ公式ドキュメントを見てみてください。 各コードには CodeSandbox へのリンクもあるので、お気軽に試せますよ。 2021/09/16時点で、5系が beta リリースされています 2021/09/16に5系がリリース
Material-UI レイアウト部品整理｜wtnb_dev
各部品のデフォルト動きの個人的メモ Box- divタグ相当 Container- 水平方向の中央揃えされたdivタグ相当 - maxWidthで横幅指定（falseで指定なし） Grid- 12列のグリッドレイアウト - containerとitemの2種類 - itemの幅はパーセンテージで変動 - spacingで余白を指定（1で8px） - direction、justify、alignItemsで方向、横の並び、縦の並びを指定 - containerはネストできる ブレークポイント- xs 0px - sm 600px - md 960px - lg 1280px - xl 1920px
Meterial-UIを使うときのポイント～Grid編～
はじめに ReactのアプリケーションのUIコンポーネントといえばMeterial-UIではないでしょうか。 Meterial-UIは2018年にversion1がでて、この記事の執筆時点で3.9.2となっています。 個人的には馴染み親しんだbootstrapのほうが画面のデザインは楽に進みそうだったのですが、 せっかくReact使うんだからと思いMeterial-UIを使い始めました。 バージョンアップが早くどんどん進化しているイメージですが、まずは基本的な使い方を身に着けようということで備忘録がてら書いていきます。 ちなみにreact-bootstrapというのを使えばReactでもコンポーネントちっくにbootstrapが使えるよう。 Gridレイアウトの使い方 Gridレイアウトの基本の基本 まずなにをするにも必要になってくるのが、Grid。 覚え方は単純に「container」で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpack App
With Material-UI's DataGrid component, how do I create multi layered text in one of the cells?
ReactJS + Material-UI: How to alternate colors between Material-UI <Table/>'s <TableRow/>?
How to test a function that output is random using Jest?
How to change the style of sorting icon in Material UI table?
GitHub - segmentio/ui-box: Blazing Fast React UI Primitive
[system] Boxes with identical style props use the same class · Issue #16704 · mui/material-ui
material-ui/benchmark at next · mui/material-ui
Can we put ListItemText and table body cell text in a font size category of their own or use body2/body1? · Issue #12726 · mui/material-ui
Typography - MUI System
material-ui/Divider.js at master · mui-org/material-ui · GitHub
Guide to the MUI grid system - LogRocket Blog
Flexbox - MUI System