Material-UIのIconButtonのアイコン色の変更方法

目次

Material-UIのIconButtonのアイコン色の変更方法

Material-UIのIconButtonコンポーネントで使用されるアイコンの色を変更するには、いくつかの方法があります。
この記事では、それらの方法を詳しく紹介します。

1. アイコンに直接colorプロパティを追加する

アイコンコンポーネント自体にcolorプロパティを指定することで、色を変更することができます。

<IconButton aria-label="delete">
  <DeleteIcon color="primary" />
</IconButton>

2. CSSを使用してアイコンの色をオーバーライドする

独自のCSSを作成して、それをアイコンに適用することで、アイコンの色を変更することもできます。

まず、CSSを定義します。

.customIcon {
  color: red; /* あるいは、任意の色コード */
}

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

<IconButton aria-label="delete">
  <DeleteIcon className="customIcon" />
</IconButton>

3. スタイリングライブラリを使用する

例として、styled-componentsや@emotion/styledなどのスタイリングライブラリを使用してアイコンの色を変更する方法を紹介します。

styled-componentsの例

import styled from 'styled-components';
import DeleteIcon from '@mui/icons-material/Delete';

const StyledDeleteIcon = styled(DeleteIcon)`
  color: red; /* あるいは、任意の色コード */
`;

// 使い方
<IconButton aria-label="delete">
  <StyledDeleteIcon />
</IconButton>

@emotion/styledの例

/** @jsxImportSource @emotion/react */
import { styled } from '@emotion/styled';
import DeleteIcon from '@mui/icons-material/Delete';

const StyledDeleteIcon = styled(DeleteIcon)`
  color: red; /* あるいは、任意の色コード */
`;

// 使い方
<IconButton aria-label="delete">
  <StyledDeleteIcon />
</IconButton>

これで、Material-UIのIconButtonのアイコンの色を変更する方法を学びました。
適切な方法を選択して、プロジェクトのニーズに合わせてカスタマイズしてください。