タグ

ブックマーク / maku.blog (1)

  • MUI コンポーネント (v5) に独自のスタイルを設定する (sx prop、styled)

    MUI v5 以降のカスタムスタイル設定MUI v5 以降でコンポーネントにカスタムスタイル (CSS) を割り当てる方法には、大きく下記の 2 つのやり方があります。 sx prop を使う方法MUI のコンポーネントには sx prop が定義されていて、ここにスタイルオブジェクトを渡すことで、個別にスタイルを調整できます。つまり、使い捨てのスタイル設定を行う方法です。sx prop は HTML 要素来の style プロパティと比べて簡潔な構文で記述できます。例えば、margin や padding の設定用に 1 文字 (m, p) のプロパティ名が定義されていたりします。styled API を使う方法既存のコンポーネントをラップする形で、スタイル拡張したコンポーネントを生成します。sx prop を使った方法に比べて再利用性が高い方法で、複数個所で使用するコンポーネントにス

    MUI コンポーネント (v5) に独自のスタイルを設定する (sx prop、styled)
  • 1