Material-UIのアイコンボタンの色を変更する方法

目次

Material-UIのアイコンボタンの色を変更する方法

Material-UIのアイコンボタンの色を変更するのは非常にシンプルです。
以下に3つの一般的な方法を示します。

インラインスタイルを使用する

アイコンに直接インラインスタイルを適用することで、色を変更することができます。

import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';

function MyButton() {
  return (
    <IconButton>
      <DeleteIcon style={{ color: 'red' }} />
    </IconButton>
  );
}

CSSでスタイルを適用

まず、CSSでのスタイルを定義します。

/* styles.css */
.redIcon {
  color: red;
}

次に、そのクラスをアイコンに適用します。

import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import './styles.css';

function MyButton() {
  return (
    <IconButton>
      <DeleteIcon className="redIcon" />
    </IconButton>
  );
}

Material-UIのmakeStylesまたはuseStylesを使用する

Material-UIのカスタムフックを使用してスタイルを適用する方法です。

import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  redIcon: {
    color: 'red',
  },
});

function MyButton() {
  const classes = useStyles();

  return (
    <IconButton>
      <DeleteIcon className={classes.redIcon} />
    </IconButton>
  );
}

これらの方法の中から、プロジェクトの要件や好みに合わせて選択してください。