Reactで:hoverを実装する方法

ReactでインラインCSSスタイルの:hoverを実装する方法

Reactでは、インラインCSSスタイルをコンポーネントのスタイルプロパティに直接指定することができます。:hoverなどの擬似クラスを使用する場合は、JavaScriptの条件演算子を使用してスタイルを動的に切り替えることができます。

基本的な例

import React, { useState } from 'react';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovere   d(!isHovered);
  };

  return (
    <button
      style={{
        backgroundColor: isHovered ? 'blue' : 'gray',
        color: isHovered ? 'white' : 'black',
        padding: '10px',
        borderRadius: '5px',
      }}
      onMouseOver={handleHover}
      onMouseOut={handleHover}
    >
      Hover Me
    </button>
  );
}

解説

1. 状態管理
   useStateフックを使用して、マウスがボタン上にホバーされているかどうかを表すisHovered状態を管理します。
2. イベントハンドラー
   onMouseOverとonMouseOutイベントハンドラーをボタンに設定し、マウスがボタンの上に乗ったときと外れたときにisHovered状態を更新します。
3. 条件演算子
   styleプロパティの値に条件演算子を使用して、isHovered状態に応じて異なるスタイルを適用します。

さらに高度な例

より複雑なスタイルを適用したい場合は、CSSモジュールやスタイルライブラリーを使用することもできます。

CSSモジュール

import styles from './Button.module.css';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      className={`${styles.button} ${isHovered ? styles.hover : ''}`}
      onMouseOver={handleHover}
      onMouseOut={handleHover}
    >
      Hover Me
    </button>
  );
}

スタイルライブラリー (Styled Components)

import styled from 'styled-components';

const Button = styled.button`
  background-color: gray;
  color: black;
  padding: 10px;
  border-radius: 5px;

  &:hover {
    background-color: blue;
    color: white;
  }
`;

function HoverButton() {
  return <Button>Hover Me</Button>;
}

import React, { useState } from 'react';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovere   d(!isHovered);
  };

  return (
    <button
      style={{
        backgroundColor: isHovered ? 'blue' : 'gray',
        color: isHovered ? 'white' : 'black',
        padding: '10px',
        borderRadius: '5px',
      }}
      onMouseOver={handleHover}
      onMouseOut={handleHover}
    >
      Hover Me
    </button>
  );
}

import styles from './Button.module.css';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      className={`${styles.button} ${isHovered ? styles.hover : ''}`}
      onMouseOver={handleHover}
      onMouseOut={handleHover}
    >
      Hover Me
    </button>
  );
}

import styled from 'styled-components';

const Button = styled.button`
  background-color: gray;
  color: black;
  padding: 10px;
  border-radius: 5px;

  &:hover {
    background-color: blue;
    color: white;
  }
`;

function HoverButton() {
  return <Button>Hover Me</Button>;
}

コード解説

• onMouseOverとonMouseOutイベントハンドラーでisHovered状態を更新します。
• useStateフックでisHovered状態を初期化します。

• classNameプロパティでCSSモジュールのクラス名と、isHovered状態に応じて追加するクラス名を指定します。
• CSSモジュールを使用して、ボタンのスタイルを定義します。

Styled Components

• &:hoverセレクターを使用して、ホバー時のスタイルを定義します。
• Styled Componentsを使用して、ボタンのスタイルを定義します。

import styles from './Button.module.css';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      className={`${styles.button} ${isHovered ? styles.hover : ''}`}
      onMouseOver={handleHover}
      onMouseOut={handleHover}
    >
      Hover Me
    </button>
  );
}

Styled Componentsは、JavaScriptのテンプレートリテラルを使用してCSSを定義できるライブラリーです。

import styled from 'styled-components';

const Button = styled.button`
  background-color: gray;
  color: black;
  padding: 10px;
  border-radius: 5px;

  &:hover {
    background-color: blue;
    color: white;
  }
`;

function HoverButton() {
  return <Button>Hover Me</Button>;
}

CSS-in-JS

CSS-in-JSは、JavaScriptでCSSを定義し、コンパイル時にCSSファイルに変換するアプローチです。

import { css } from '@emotion/react';

function HoverButton() {
  const [isHovered, setIsHovered] = useState(false);

  const buttonStyles = css`
    background-color: gray;
    color: black;
    padding: 10px;
    border-radius: 5px;

    &:hover {
      background-color: blue;
      color: white;
    }
  `;

  return (
    <button css={buttonStyles}>Hover Me</button>
  );
}

それぞれの方法のメリットとデメリット

• デメリット
  ファイルの分割や管理が複雑になることがある。
• メリット
  クラス名のスコープ化により衝突を防ぐことができる。

• デメリット
  他のスタイルライブラリーと競合する可能性がある。
• メリット
  JavaScriptのテンプレートリテラルを使用してCSSを定義できる。

• デメリット
  コンパイルが必要なため、ビルドプロセスが複雑になることがある。
• メリット
  JavaScriptでCSSを定義できるため、動的なスタイルを簡単に実装できる。