【React × MaterialUI】ボタンやカードにホバーエフェクトを追加！魅力的なUIデザインのヒント

2024-05-23

MaterialUI でカスタムホバースタイルを作成する方法

このチュートリアルでは、MaterialUI を使用してカスタムホバースタイルを作成する方法を説明します。

手順

スタイルオブジェクトを作成する

まず、スタイルオブジェクトを作成する必要があります。このオブジェクトには、コンポーネントのさまざまな状態に対応するスタイルプロパティが含まれます。

const styles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: theme.spacing(2),
  },
  '&:hover': { // ホバー状態のスタイル
    backgroundColor: theme.palette.primary.dark,
  },
}));

上記の例では、root というスタイルプロパティが定義されています。このプロパティは、コンポーネントのルート要素に適用されます。

'&:hover' という疑似クラスセレクタは、マウスがコンポーネントの上にホバリングしているときに適用されるスタイルを定義します。

スタイルオブジェクトをコンポーネントに適用する

スタイルオブジェクトを作成したら、それをコンポーネントに適用する必要があります。これを行うには、classes プロップを使用します。

const MyComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {/* コンポーネントの内容 */}
    </div>
  );
};

上記の例では、classes 変数にスタイルオブジェクトが割り当てられています。次に、className プロップを使用して、root スタイルプロパティが div 要素に適用されます。

その他のヒント

さまざまな状態に対応するスタイルを作成するには、追加の疑似クラスセレクタを使用できます。たとえば、コンポーネントがフォーカスされている場合のスタイルを定義するには、'&:focus' セレクタを使用できます。
テーマオブジェクトを使用して、スタイルプロパティにテーマ値を挿入できます。これにより、スタイルをアプリケーションの全体的なテーマと一致させることができます。

MaterialUI を使用してカスタムホバースタイルを作成するのは簡単です。スタイルオブジェクトを作成し、それをコンポーネントに適用するだけです。このチュートリアルで説明した手順に従って、独自のホバースタイルを作成してみてください。

import React from 'react';
import { makeStyles } from '@mui/material';

const styles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: theme.spacing(2),
  },
  '&:hover': { // ホバー状態のスタイル
    backgroundColor: theme.palette.primary.dark,
  },
}));

const MyComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {/* コンポーネントの内容 */}
      <p>ホバーすると背景色が変わります</p>
    </div>
  );
};

export default MyComponent;

このコードを実行すると、以下のようなボタンが表示されます。

マウスがボタンの上にホバリングすると、背景色が暗くなります。

このコードは、さまざまな方法でカスタマイズできます。たとえば、ボタンの形状やテキストの色を変更したり、アニメーションを追加したりできます。

注意事項

このコードはあくまで一例であり、すべての状況に適しているわけではありません。独自のホバースタイルを作成するには、アプリケーションの要件に合わせてコードを調整する必要があります。

MaterialUI でカスタムホバースタイルを作成するその他の方法

useStyles フックは、コンポーネント内でスタイルを作成するための最も一般的な方法です。このフックを使用すると、スタイルオブジェクトを定義し、それをコンポーネントの要素に適用できます。

import React from 'react';
import { makeStyles } from '@mui/material';

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: theme.spacing(2),
  },
  '&:hover': { // ホバー状態のスタイル
    backgroundColor: theme.palette.primary.dark,
  },
}));

const MyComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {/* コンポーネントの内容 */}
    </div>
  );
};

export default MyComponent;

styled-components は、React コンポーネントをスタイリングするためのライブラリです。このライブラリを使用すると、コンポーネントをテンプレートリテラルで定義し、スタイルを直接記述できます。

import React from 'react';
import styled from '@emotion/styled';

const Root = styled.div`
  background-color: ${props => props.theme.palette.primary.main};
  color: ${props => props.theme.palette.common.white};
  padding: ${props => props.theme.spacing(2)};

  &:hover {
    background-color: ${props => props.theme.palette.primary.dark};
  }
`;

const MyComponent = () => {
  return (
    <Root>
      {/* コンポーネントの内容 */}
    </Root>
  );
};

export default MyComponent;

css-in-js ライブラリは、JavaScript コード内でスタイルを定義するためのライブラリです。これらのライブラリを使用すると、スタイルをコンポーネント内に直接記述したり、コンポーネントプロパティとしてスタイルオブジェクトを渡したりできます。

styled-components は css-in-js ライブラリの 1 つですが、他にも emotion、styled-system、jss などがあります。

CSS モジュールは、コンポーネント固有の CSS クラスを定義するための方法です。この方法を使用すると、スタイルのスコープをコンポーネント内に限定し、グローバルな名前空間汚染を防ぐことができます。

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.root}>
      {/* コンポーネントの内容 */}
    </div>
  );
};

export default MyComponent;