サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Materialui の Modal のサンプルをTypeScript にコピペしたら JSX でインラインスタイルの指定にCSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使うCSS }; const MyComponent = () => { return <div style={style} /> // => style={style} の箇所が型エラーになる } 環境typescript@4.1.6react@17.0.2 @mui/material@5.2.7 結論 通常の JSX にCSS のオブジェクトを渡す際はReact.CSSProperties の型をつける MaterialUI の sx に渡すCSS のオブジェクトは as const するか SxProps<Theme> の
MUI v5 以降のカスタムスタイル設定MUI v5 以降でコンポーネントにカスタムスタイル (CSS) を割り当てる方法には、大きく下記の 2 つのやり方があります。 sx prop を使う方法MUI のコンポーネントには sx prop が定義されていて、ここにスタイルオブジェクトを渡すことで、個別にスタイルを調整できます。つまり、使い捨てのスタイル設定を行う方法です。sx prop はHTML 要素本来の style プロパティと比べて簡潔な構文で記述できます。例えば、margin や padding の設定用に 1 文字 (m, p) のプロパティ名が定義されていたりします。styledAPI を使う方法既存のコンポーネントをラップする形で、スタイル拡張したコンポーネントを生成します。sx prop を使った方法に比べて再利用性が高い方法で、複数個所で使用するコンポーネントにス
はじめに 実務でMUIを本格的に使用することになりそうなので、MUIに入門していきたいと思います。 なお、筆者はMUIの前身のMaterialUIは少し使用したことがあり、Material Designについてはエアプです。それらを踏まえて対戦よろしくお願いします。本記事で触れること パッケージ構成からみるMUIの概要 MUIのカスタマイズ MUIで何ができるのか その他のUIコンポーネントライブラリと比較した場合のMUIの立ち位置本記事で触れないこと MUIの導入手順 MUIの具体的な使用方法 パッケージ構成からみるMUIの概要 ※この章は基本的には以下のページを和訳したものとなります。 まずMUIには以下の2種類のプロジェクトが存在します。 MUI Core MUI X みなさんがMUIと聞いて思い浮かべるのはMUI Coreの方だと思います。 MUI Xは複雑なユースケースに対
こんにちは、 Gaji-Laboフロントエンドエンジニアの鈴木です。 タイトルの通りですが、Material-UI を使ったコンポーネントで makeStyles 使用時、ネストした要素にクラス名でスタイルを当てるのに少しハマりました。 無事解決できたのでサンプルコードを残しておこうと思います。 実現したい事実現したかったことは「ある要素に hover したら、その子要素に変化を与えたい」でした。このサンプルでは要素を表示したい、です。 https://codepen.io/yuri_xxx8/pen/wvoLyZBHTML / SCSS でのサンプルMaterial-UI でのサンプルコードの前に、まずはHTML / SCSS でのサンプルを用意しました。 <div class="contents"> <p> このグレーのエリアに hover したら ⭐️ が表示される </p> <
Given the Card code as in here. How can I update the card style or any materialUI style as from: const styles = theme => ({ card: { minWidth: 275, }, To such follows: const styles = theme => ({ card: { minWidth: 275, backgroundColor: props.color }, when I tried the latest one, IgotLine 15: 'props' is not defined no-undef when I updated code to be : const styles = theme => (props) => ({ card: {
Introducing MUI Core v5.0 https://mui.com/blog/mui-core-v5/ スタイリングの実装方法 MUI v5 では、スタイリングのコアライブラリが JSS からemotion に変わりました。この記事では説明しないので、詳しく知りたい方は Introducing MUI Core v5.0 を参照してください。 さて、v4 では useStyles という自作フックでコンポーネントのスタイリングをしていましたが、この変更によって v5 からはコンポーネントに sx Prop で直接スタイルを書くことができます。 v4 と v5 の記法の違い Material-UI v4 の記法 makeStyles でスタイル用のフックを作成し、コンポーネント内で className を取得します。 import { makeStyles,createS
はじめに Material-UI のコンポーネントのスタイルを変更したいなーと思った際に、公式ドキュメントだけでは"withStyles"の利用方法が分かりづらかったので。 色々と使い方はあるみたいだが、とりあえず基本の基本をピックアップ。 withStyles の基本 下記のように withStyles によってコンポーネントを作成し配置する。 const CustomComponent = withStyles({ root: { // ここにスタイルを書いたり }, label: {}, //etc... })(カスタムしたいコンポーネント) // コンポーネントの配置 <CustomComponent /> 直接 className や style にスタイルを指定してもよいが、同じレイアウトのものを複数作成したり、変更点が多い場合にスッキリしたコードが書けるのでおすすめ。 ro
どうもよしです。久しぶりの投稿になります。 元々、Material Design をベースとしたUI コンポーネントライブラリである、MaterialUI の v5 が遂にリリースされました！ v4 からどう変わったのか自分でも試すなど、さらっと見てみたので、ここにまとめてみました。 ※2023/11/25 MUI の更新に伴い、MUI v5.0系のドキュメント参照したほうが良い部分はリンクを差し替えました。 MaterialUI とは？ 元々、Google の Material Design をベースに開発された、UI コンポーネントライブラリです。 MaterialUI の概要や v4 の機能に関しては、以前に記事を書いていますので、よろしければそちらをご参照ください。 ※今回の記事は、主に以下の公式ブログ記事をもとにしています。引用文の出典もそちらです。 そのため、すでにそち
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
