Material-UI を使用して Material Design のカラーパレットをサイトに適用する
こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
今回は前回の記事「React + Material-UIを使用してMaterial Designのコンポーネントを作成する」に引き続いて、Material-UIでの基本的な色の使い方について知見をまとめたいと思います。
Material-UI の Colors について
Material-UI には、 Material Design で定義されているカラーパレットを変数として呼び出して使用できる機能が備わっています。
@material-ui/core/colors から使用したい色を import することで、前回の記事でご紹介した makeStyle や createMuiTheme などで色を使用することができます。これにより、簡単に Material Design のカラーパレットをサイトで使用できるようになります。
一例として、 createMuiTheme では以下のように色変数を使用することができます。
import * as React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { Button, ButtonProps } from "@material-ui/core/";
import purple from "@material-ui/core/colors/purple"; // @material-ui/core/colors/ から使用したい色調を import する
type Props = React.ButtonHTMLAttributes<ButtonProps>;
export const ExampleButton: React.FC<Props> = () => {
const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
backgroundColor: purple[500], // 色と濃度で指定する
},
},
},
});
return (
<ThemeProvider theme={theme}>
<Button variant="contained" color="primary">
label
</Button>
</ThemeProvider>
);
};
コンポーネントに指定した色が反映される
使用できる色調と濃度の一覧は公式のドキュメントに掲載されています。
実際に使用する場面では、 Material Design で定義されている色以外にも使用する色があるため、以下のように全ての色をまとめて変数定義して使用するようにしています。
...
import grey from "@material-ui/core/colors/grey";
export const colors = {
white: "#fff",
black: "#000",
muiGrey100: grey[100], // #f5f5f5
muiGrey300: grey[300], // #e0e0e0
muiGrey500: grey[500], // #9e9e9e
};
export const ExampleButton: React.FC<Props> = () => {
const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
backgroundColor: colors.muiGrey100,
},
},
},
});
...テーマカラーとして使われるコンポーネント全体に適用する
Material UI では primary や secondary などのテーマカラーがデフォルトで定義されていますが、 createMuiTheme でそれを変更することができます。
createMuiTheme の palette でテーマカラーを設定します。
import purple from "@material-ui/core/colors/purple";
import orange from "@material-ui/core/colors/orange";
export const ExampleButtons: React.FC<Props> = () => {
const theme = createMuiTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: orange[500],
},
},
});
return (
<ThemeProvider theme={theme}>
<Button variant="contained" color="primary">
label
</Button>
<Button variant="contained" color="secondary">
label
</Button>
</ThemeProvider>
);
};このように設定することで、コンポーネントで使用される primary の色を一括で変更することができます。
先述の例では overrides で特定のコンポーネントのの色を個別に上書きしていましたが、サイト全体でテーマカラーが確定している場合は palette で全体のテーマカラーを上書きするのが適切かと思います。
テーマカラーを決める上では公式にカラーピッカーツールも用意されています。
まとめ
今回は前回の記事「React + Material-UIを使用してMaterial Designのコンポーネントを作成する」に引き続き、 Material-UI での色の使用方法についてまとめました。
Material-UI に興味を持っている方の参考にしていただけると幸いです。
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
