🌏

【MUI】公式サイト読み解き:Theming編

6 min read

URL

https://mui.com/customization/theming/

Theming

// 原文
Customize MUI with your theme. You can change the colors, 
the typography and much more.

The theme specifies the color of the components, 
darkness of the surfaces, level of shadow, 
appropriate opacity of ink elements, etc.

Themes let you apply a consistent tone to your app. 
It allows you to customize all design aspects of 
your project in order to meet the specific needs of your business or brand.

To promote greater consistency between apps, 
light and dark theme types are available to choose from. 
By default, components use the light theme type.
// 翻訳
あなたのテーマでMUIをカスタマイズ。
色やタイポグラフィなど、様々な変更が可能です。

テーマでは、コンポーネントの色、表面の暗さ、影のレベル、インク要素の
適切な不透明度などを指定します。

テーマを使えば、アプリに一貫したトーンを適用することができます。
ビジネスやブランドの特定のニーズを満たすために、
プロジェクトのすべてのデザイン面をカスタマイズすることができます。

アプリ間の一貫性を高めるために、
ライトテーマとダークテーマのタイプを選択することができます。
デフォルトでは、コンポーネントはライトテーマタイプを使用します。

【メモ】
MUIにはThemeというものがあってそれはすべてのMUIコンポーネントにデフォルトで適用されている。それを自分でカスタマイズして色や書体を変えることができるみたい。すべてのMUIコンポーネントに適用することができるから一貫した見た目、スタイルを定義できるっぽい。

Theme provider

// 原文
If you wish to customize the theme,
you need to use the ThemeProvider component in order to inject
a theme into your application. However,
this is optional; MUI components come with a default theme.

ThemeProvider relies on the context feature of
React to pass the theme down to the components,
so you need to make sure that ThemeProvider is
a parent of the components you are trying to customize.
You can learn more about this in the API section.
// 翻訳
テーマをカスタマイズしたい場合は、ThemeProviderコンポーネントを使用して、
アプリケーションにテーマを注入する必要があります。
ただし、これはオプションで、
MUIコンポーネントにはデフォルトのテーマが付属しています。

ThemeProviderはReactのコンテキスト機能に依存して
テーマをコンポーネントに渡すため、
ThemeProviderがカスタマイズしようとしているコンポーネントの
親であることを確認する必要があります。
これについては、APIのセクションで詳しく説明しています。

【メモ】
実際にテーマを適用するにはThemeProviderコンポーネントを利用する。ただ、これを利用しなくてもMUIコンポーネントにはデフォルトでテーマが適用されている。追加するというよりオーバーライドするイメージか。
Reactのコンテキストについては以下公式。

https://ja.reactjs.org/docs/context.html
要はテーマを適用するコンポーネントをThemeProviderコンポーネントで囲む必要があるってことかな?

Theme configuration variables(テーマ設定変数)

// 原文
Changing the theme configuration variables is 
the most effective way to match MUI to your needs.
The following sections cover the most important theme variables:

・.palette
・.typography
・.spacing
・.breakpoints
・.zIndex
・.transitions
・.components
You can check out the default theme section to view the default theme in full.
// 翻訳
テーマ設定変数を変更することは、MUIを自分のニーズに合わせる最も効果的な方法です。以下のセクションでは、最も重要なテーマ変数について説明します。

・.パレット
・.タイポグラフィ
・.スペーシング
・.ブレイクポイント
・.zIndex
・トランジション
・.コンポーネント
デフォルトのテーマのセクションでは、デフォルトのテーマの全容を確認することができます。

【メモ】
テーマはオブジェクトでオブジェクトは変数を持っている。
それがデフォルトで適用されている。その変数(テーマ設定変数)を変更する
ことで自分の思い通りの見た目にする(ニーズに合わせる)ことが出来る。
デフォルトテーマは以下で確認できる(公式)

https://mui.com/customization/default-theme/

Custom variables(カスタム変数)

// 原文1
When using MUI's theme with the styling solution
or any others, it can be convenient to add additional variables
to the theme so you can use them everywhere. For instance:
const theme = createTheme({
  status: {
    danger: orange[500],
  },
});
// 原文2
If you are using TypeScript, you would also need
to use module augmentation for the theme to accept the above values.
declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}
// 翻訳1
MUIのテーマをスタイリングソリューションなどと一緒に使う場合、
テーマに追加の変数を追加しておくと、どこでも使えるようになって便利です。例えば
// 翻訳2
TypeScriptを使用している場合は、テーマが上記の値を受け入れるために
モジュール拡張を使用する必要があります。

【メモ】
テーマには独自の変数を追加しておくこともできる。
そうすればThemeProvider配下のコンポーネントでそれを使うことができて便利。
例ではtheme.status.dangerでアクセスできる。
TSを使ってるなら上に記載のモジュールが必要らしい。TS不勉強なのでここら辺はわかり次第追記したい。

Theme builder

// 原文
The community has built great tools to build a theme:

mui-theme-creator: A tool to help design and customize themes for 
the MUI component library. Includes basic site templates to
show various components and how they are affected by the theme
Material palette generator: The Material palette generator can be 
used to generate a palette for any color you input.
// 翻訳
コミュニティでは、テーマを作るための素晴らしいツールが作られています。

MUI-THEME-CREATOR: MUIコンポーネントライブラリのテーマをデザインし、
カスタマイズするためのツールです。様々なコンポーネントと、
それらがテーマによってどのように影響されるかを示す基本的な
サイトテンプレートを含みます。
Material palette generator: マテリアルパレットジェネレータ。Material palette generator: 入力された任意の色のパレットを生成するために使用することができます。

【メモ】
・マテリアルパレットジェネレータ

https://material.io/inline-tools/color/
・MUI-THEME-CREATOR
https://bareynol.github.io/mui-theme-creator/#Select

Accessing the theme in a component(コンポーネント内のテーマにアクセスする)

// 原文
You can access the theme variables inside your React components.
// 翻訳
Reactコンポーネントの中でテーマの変数にアクセスできます。

You can accessがリンクになっていて飛ぶと useTheme hookのページに飛ぶ。useThemeフックとはReactのコンポーネント内でThemeにアクセスするためのhook。useTheme()の返り値がthemeオブジェクトになっていて、あとはtheme.テーマ変数として利用するだけ。
・useThemeのページ

https://mui.com/styles/advanced/#accessing-the-theme-in-a-component

Nesting the theme(テーマのネスト化)

// 原文
You can nest multiple theme providers.
The inner theme will override the outer theme. 
You can extend the outer theme by providing a function:
// 翻訳
複数のテーマプロバイダーをネストすることができます。
内側のテーマは外側のテーマを上書きします。
関数を提供することで、外側のテーマを拡張することができます。

【メモ】
ThemeProviderを利用すればアプリ全体に共通のスタイルを提供できる。
さらには一部分は別の色に統一することもネストによって実現できるみたい。
ThemeProviderにはtheme propsというのがあって、右辺はコールバック関数になる。
引数で外側のThemeオブジェクトを受け取ることが出来る。
それをオーバーライドしてreturnすればそのThemeProviderの配下でreturnしたthemeオブジェクトを適用できる。

        <ThemeProvider<MyTheme>
          theme={(outerTheme) => ({
            ...outerTheme,
            background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
            boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',
          })}
        >

また、上書きだけじゃなくて拡張もできるみたい

<ThemeProvider theme={} >
  <Child1 />
  <ThemeProvider theme={outerTheme => ({ darkMode: true, ...outerTheme })}>
    <Child2 />
  </ThemeProvider>
</ThemeProvider>

以上です。あとはjssとかmakeStylesといった内容ぽかったです。私はv5から触り始めたのでよくわからないのですが、jssはemotionに置き換わり、makeStylesは非推奨になったらしいので、今回はここまでにしておきます。

Discussion

ログインするとコメントできます