Material UI アイコン カラー変更

ReactでMaterial UI Iconsのカラーをオーバーライドする方法 (日本語)

ReactのプロジェクトでMaterial UI Iconsを使用している場合、デフォルトのアイコンカラーをオーバーライドしたいことがあります。これをSassを使用して実現する方法を説明します。

Material UI Iconsのインストール (もしまだ行っていない場合)

npm install @mui/material @mui/icons-material

Sassファイルの作成

プロジェクトのルートディレクトリに、styles.scssという名前のSassファイルを作成します。

Sassファイルにスタイルを追加

// Material UIのグローバルスタイルをインポート
@import '@mui/material/styles';

// アイコンのカラーをオーバーライド
.MuiSvgIcon-root {
  color: #your-desired-color; // 好きなカラーを指定
}

Reactコンポーネントでスタイルを適用

import React from 'react';
import { Button, AddCircle } from '@mui/material';

function MyComponent() {
  return (
    <Button variant="contained" color="primary">
      <AddCircle />
    </Button>
  );
}

Sassファイルのインポート

プロジェクトのエントリポイント（通常はindex.js）で、Sassファイルをインポートします。

import './styles.scss';

CSSのビルド

SassファイルはCSSに変換する必要があります。WebpackやCreate React Appなどのツールを使用している場合は、自動的にビルドされることが多いです。

解説

• colorプロパティを使用して、アイコンのカラーを指定します。
• .MuiSvgIcon-rootクラスは、Material UIのすべてのアイコンのルート要素を表します。

• Material UIは、テーマシステムを使用してグローバルなスタイルを管理することもできます。テーマを使用することで、アイコンのカラーをより柔軟に制御することができます。
• Sassの変数を使用して、カラー値を管理することもできます。
• 複数のアイコンのカラーを個別にオーバーライドしたい場合は、各アイコンのクラスにスタイルを適用します。

CSSクラスを使用する

.MuiSvgIcon-root {
  color: #your-desired-color;
}

この方法では、すべてのアイコンのカラーが同じになります。

アイコンのクラスを使用する

.MuiSvgIcon-root.MuiSvgIcon-fontSizeSmall {
  color: #your-desired-color;
}

この方法では、特定のサイズのアイコンのカラーを変更することができます。

アイコンコンポーネントのスタイルプロパティを使用する

import { AddCircle } from '@mui/material';

<AddCircle style={{ color: '#your-desired-color' }} />

Material UIのテーマを使用する

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#your-desired-color',
    },
  },
});

<ThemeProvider theme={theme}>
  <AddCircle />
</ThemeProvider>

この方法では、プロジェクト全体のカラーテーマを定義し、アイコンのカラーをテーマに合わせたものにすることができます。

例

import React from 'react';
import { Button, AddCircle } from '@mui/material';

function MyComponent() {
  return (
    <Button variant="contained" color="primary">
      <AddCircle style={{ color: 'green' }} />
    </Button>
  );
}

この例では、AddCircleアイコンのカラーを緑色に変更しています。

注意

• Material UIのテーマを使用すると、プロジェクト全体のカラーテーマを管理することができます。
• 複数のアイコンのカラーを個別に変更したい場合は、それぞれのアイコンのクラスを使用するか、スタイルプロパティを使用します。

:root {
  --icon-color: #your-desired-color;
}

.MuiSvgIcon-root {
  color: var(--icon-color);
}

この方法では、CSS変数を定義して、アイコンのカラーを動的に変更することができます。

JavaScriptを使用してカラーを動的に変更する

import React, { useState } from 'react';
import { Button, AddCircle } from '@mui/material';

function MyComponent() {
  const [iconColor, setIconColor] = useState('#your-desired-color');

  const handleColorChange = () => {
    setIconColor('#new-color');
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleColorChange}>
        <AddCircle style={{ color: iconColor }} />
      </Button>
    </div>
  );
}

Material UIのテーマのオーバーライド

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#your-desired-color',
    },
  },
});

<ThemeProvider theme={theme}>
  <AddCircle />
</ThemeProvider>