# コンポーネントのカスタマイズ

Material-UIコンポーネントの外観を簡単にカスタマイズできます。

コンポーネントはさまざまなコンテキストで使用できるため、これにはいくつかのアプローチがあります。 最小のユースケースから最大のユースケースまで、次をご覧ください 1. [一時的な状況の特定のバリエーション](#1-specific-variation-for-a-one-time-situation) 2. [一時的な状況の動的変化](#2-dynamic-variation-for-a-one-time-situation) 3. 異なるコンテキストで再使用される[特定のバリエーションのコンポーネント](#3-specific-variation-of-a-component) 4. [Material Design variations](#4-material-design-variations)のボタンコンポーネントなど 5. [グローバルテーマバリエーション](#5-global-theme-variation) ## 1. 一時的な状況の特定のバリエーション 次のソリューションを使用できる特定の実装のコンポーネントのスタイルを変更する必要がある場合があります。 ### クラス名classNameでスタイルをオーバーライドする コンポーネントのスタイルをオーバーライドする最初の方法は、**class names**を使用することです。 すべてのコンポーネントには、常にルート要素に適用される`className`プロパティがあります。 この例では、[`withStyles()`](/styles/basics/#higher-order-component-api)の高次(higher-order) を使用します。 コンポーネントの`classes`プロパティを使用して、カスタムスタイルをDOMに挿入し、クラス名を`ClassNames`コンポーネントに渡します。 他のスタイリングソリューション、またはプレーンCSSを選択してスタイルを作成することもできますが、必ず CSSがDOMに注入されるときの[CSS注入順序](/styles/advanced/#css-injection-order)を考えてみてください。 Material-UIを使用してコンポーネントをスタイル設定すると、``が下に挿入されるため、高い特異性が得られます。 の``を使用して、コンポーネントが常に正しくレンダリングされるようにします。 {{"demo": "pages/customization/components/ClassNames.js"}} ### クラスclassesによるスタイルのオーバーライド `className`プロパティでは不十分で、より深い要素にアクセスする必要がある場合は、`classes`オブジェクトプロパティを利用して、特定のコンポーネントに対してMaterial-UIによって注入されるすべてのCSSをカスタマイズできます。 それぞれのクラスのリスト コンポーネントについては、コンポーネントAPIページの**CSS section**および**rule name column**を参照してください。 例えば、[Button CSS API](/api/button/#css)で見ることができます。 文 または、[browser dev tools](#using-the-dev-tools)を使用することもできます。 例えば、[Button CSS API](/api/button/#css)で見ることができます。 文 または、[browser dev tools](#using-the-dev-tools)を使用することもできます。 例えば、[Button CSS API](/api/button/#css)で見ることができます。 または、[ブラウザの開発ツール](#using-the-dev-tools)を使用することもできます。 例えば、[Button CSS API](/api/button/#css)で見ることができます。 または、[ブラウザの開発ツール](#using-the-dev-tools)を使用することもできます。 例えば、[Button CSS API](/api/button/#css)で見ることができます。 または、[ブラウザの開発ツール](#using-the-dev-tools)を使用することもできます。 この例では、`withStyles()`も使用していますが、ここでは、`ClassesNesting(上記参照) はButton`の`classes propを使用して、 オーバーライドするクラスの名を適用するCSSクラス名(スタイルルール)にマップするオブジェクトを提供します(values)。 コンポーネントの既存のクラスは引き続き注入されるため、必要なのは特定のスタイルを指定することだけです。 追加またはオーバーライドします。

ボタンのスタイル設定に加えて、ボタンのラベルの大文字と小文字が変更されていることに注意してください。

{{"demo": "pages/customization/components/ClassesNesting.js"}}

グローバルクラス名でスタイルをオーバーライドする

このセクションに従ってください 。

開発ツール(dev tools) を使用する

ブラウザ開発ツールを使えば、時間を大幅に節約できます。 Material-UIのクラス名は、開発モードでは a simple patternに従います。 Mui[component name]-[style rule name]-[UUID]`。 上記のデモに戻りましょう。 ボタン・ラベルを上書きする方法は? ![dev-tools](/static/images/customization/dev-tools.png) 開発ツールを使用して、`Button`コンポーネントと`label`スタイルルールをターゲットにする必要があることがわかります。 ```jsx