目次
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> ); }
これらの方法の中から、プロジェクトの要件や好みに合わせて選択してください。