React

ReactでCSSが反映されない｜スタイル適用の優先順位

ReactでCSSが反映されない原因と解決方法を解説。スタイル適用の優先順位やCSS Modules、styled-componentsの使い方も紹介します。

Learning Next 運営
約 21 分で読めます
ReactCSSスタイル優先順位CSS Modules

みなさん、ReactでCSSを書いたのに「あれ？スタイルが反映されない」と困った経験はありませんか？

「CSSファイルを作ったのに色が変わらない」 「他のスタイルが優先されてしまう」

こんな状況になって悩んだことはありませんか？ 実は、ReactでCSSが適用されない原因は複数あって、特にスタイルの優先順位が関係していることが多いんです。

この記事では、ReactでCSSが反映されない原因と、確実にスタイルを適用させる方法を詳しく解説します。 優先順位の仕組みを理解すれば、思い通りのスタイリングが実現できるようになりますよ！

ReactでCSSが反映されない主な原因

ReactでCSSが反映されない原因を整理してみましょう。

意外と基本的なミスから、複雑な優先順位の問題まで様々な原因があります。

CSSファイルのimport忘れ

最も基本的な原因は、CSSファイルをimportしていないことです。

// ❌ CSSファイルをimportしていない
import React from 'react';

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

HTMLとは違って、ReactではCSSファイルを明示的にimportしないとスタイルが適用されません。

正しい書き方を見てみましょう。

// ✅ CSSファイルを正しくimport
import React from 'react';
import './App.css'; // これが必要！

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

import './App.css';を追加することで、CSSファイルが読み込まれます。 これを忘れると、どんなに良いCSSを書いても全く反映されません。

クラス名の間違い

HTMLのclass属性とReact のclassName属性を混同することもよくあります。

// ❌ HTMLの書き方
<div class="container">

// ✅ Reactでの正しい書き方
<div className="container">

ReactではclassNameを使用する必要があります。 classと書いても警告が出るだけで、スタイルは適用されません。

CSS Modulesの設定問題

CSS Modulesを使用している場合、適切なimportとクラス名の指定が必要です。

// ❌ 通常のCSSのように書いている
import './styles.module.css';

function Component() {
  return <div className="container">...</div>;
}

この書き方では、スタイルが適用されません。

// ✅ CSS Modulesの正しい書き方
import styles from './styles.module.css';

function Component() {
  return <div className={styles.container}>...</div>;
}

CSS Modulesでは、stylesオブジェクトを通してクラス名にアクセスします。 これにより、クラス名の衝突を避けることができます。

CSSの優先順位とReact

ReactでのCSS優先順位の仕組みを理解しましょう。

基本的な優先順位

CSS の優先順位は以下の順序で決まります。

  1. inline style（最も高い優先度）
  2. ID セレクタ
  3. クラス セレクタ
  4. 要素 セレクタ（最も低い優先度）
// 1. inline style（最優先）
<div style={{ color: 'red' }}>

// 2. ID セレクタ
<div id="unique-element">

// 3. クラス セレクタ
<div className="my-class">

// 4. 要素 セレクタ
<div>

この順序を理解することで、なぜ期待したスタイルが適用されないのかが分かります。

例えば、CSSでクラスセレクタを使っていても、インラインスタイルがあるとそちらが優先されます。

!importantの使用

!importantを使用すると、他のスタイルより優先されます。

/* 他のスタイルより優先される */
.title {
  color: blue !important;
}

ただし、!importantの多用は保守性を下げるため、どうしても必要な場合にのみ使用しましょう。

基本的には、適切なセレクタの指定で解決することをおすすめします。

同じ優先度の場合の判定

同じ優先度の場合、後に定義されたスタイルが適用されます。

/* 後に定義されたスタイルが適用される */
.title {
  color: red;
}

.title {
  color: blue; /* こちらが適用される */
}

CSSファイルのimport順序も影響するため、注意が必要です。

具体的な解決方法

実際の問題とその解決方法を詳しく見てみましょう。

基本的なCSS適用

まず、最も基本的なパターンから見てみます。

/* App.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  font-size: 2rem;
  color: #333;
  text-align: center;
}

このCSSファイルを作成したら、Reactコンポーネントで正しく使用します。

// App.js
import React from 'react';
import './App.css'; // CSSファイルをimport

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

export default App;

この例では、以下のポイントが重要です。

  • import './App.css';でCSSファイルを読み込む
  • classNameを使用してクラス名を指定
  • CSSファイルのクラス名と一致させる

CSS Modulesの使用

CSS Modulesを使用すると、クラス名の衝突を防ぐことができます。

/* styles.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
}

.title {
  font-size: 2rem;
  color: #333;
  text-align: center;
}

CSS Modulesファイルは、.module.cssという拡張子を使用します。

// Component.js
import React from 'react';
import styles from './styles.module.css';

function Component() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World</h1>
    </div>
  );
}

export default Component;

CSS Modulesでは、stylesオブジェクトを通してクラス名にアクセスします。 これにより、各コンポーネントで独立したスタイルを管理できます。

複数クラスの適用

一つの要素に複数のクラスを適用したい場合の書き方です。

// 複数のクラスを適用する方法
function Component() {
  return (
    <div className={`${styles.container} ${styles.active}`}>
      <h1 className={`${styles.title} ${styles.highlighted}`}>
        Hello World
      </h1>
    </div>
  );
}

テンプレートリテラルを使用して、複数のクラスを組み合わせています。

classnamesライブラリを使用すると、より便利に書けます。

// classnames ライブラリを使用
import classNames from 'classnames';

function Component({ isActive }) {
  return (
    <div className={classNames(styles.container, {
      [styles.active]: isActive
    })}>
      <h1 className={styles.title}>Hello World</h1>
    </div>
  );
}

classNamesを使用することで、条件に応じてクラスを動的に切り替えることができます。

styled-componentsでの解決

styled-componentsを使用すると、CSS-in-JSでスタイルを管理できます。

基本的な使い方

import styled from 'styled-components';

const Container = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
`;

const Title = styled.h1`
  font-size: 2rem;
  color: #333;
  text-align: center;
`;

function Component() {
  return (
    <Container>
      <Title>Hello World</Title>
    </Container>
  );
}

styled-componentsでは、CSSが確実にコンポーネントに適用されます。 クラス名の衝突や、CSSファイルの読み込み忘れといった問題が起こりません。

プロパティベースのスタイリング

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  
  &:hover {
    background-color: ${props => props.primary ? '#0056b3' : '#545b62'};
  }
`;

function Component() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

propsを使用することで、動的なスタイリングが可能です。 同じコンポーネントでも、propsによって見た目を変えることができます。

インラインスタイルの活用

インラインスタイルは最も高い優先度を持ちます。

基本的なインラインスタイル

function Component() {
  const containerStyle = {
    maxWidth: '1200px',
    margin: '0 auto',
    padding: '20px',
    backgroundColor: '#f5f5f5'
  };

  const titleStyle = {
    fontSize: '2rem',
    color: '#333',
    textAlign: 'center'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello World</h1>
    </div>
  );
}

インラインスタイルは確実に適用されますが、メンテナンスが困難になる場合があります。

CSS プロパティ名は、background-colorではなくbackgroundColorのようにキャメルケースで書く必要があります。

条件付きスタイル

function Component({ isActive, theme }) {
  const buttonStyle = {
    padding: '10px 20px',
    border: 'none',
    borderRadius: '4px',
    fontSize: '1rem',
    cursor: 'pointer',
    backgroundColor: isActive ? '#007bff' : '#6c757d',
    color: theme === 'dark' ? '#fff' : '#000'
  };

  return (
    <button style={buttonStyle}>
      Click me
    </button>
  );
}

propsや状態に応じて、動的にスタイルを変更できます。 複雑なスタイリングロジックがある場合に便利です。

よくある問題とトラブルシューティング

実際によくある問題とその解決方法をご紹介します。

グローバルCSSとの競合

/* global.css */
.title {
  color: red !important;
}

/* Component.css */
.title {
  color: blue; /* 適用されない */
}

この問題は、グローバルCSSが!importantを使用しているため発生します。

解決方法はいくつかあります。

// 解決方法1: CSS Modulesを使用
import styles from './Component.module.css';

function Component() {
  return (
    <h1 className={styles.title}>Title</h1>
  );
}

// 解決方法2: より具体的なセレクタを使用
.component .title {
  color: blue;
}

CSS Modulesを使用することで、グローバルCSSとの競合を避けることができます。

ビルド時のCSS最適化

開発環境では適用されるが、本番環境で適用されない場合があります。

// webpack.config.js の設定確認が必要
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

ビルド設定が正しく構成されているか確認しましょう。 特に、CSS loaderの設定が重要です。

CSS-in-JSライブラリとの競合

// ❌ 複数のライブラリを混在
import styled from 'styled-components';
import { css } from '@emotion/css';

// ✅ 一つのライブラリに統一
import styled from 'styled-components';

複数のCSS-in-JSライブラリを使用すると、競合が発生する可能性があります。 一つのライブラリに統一することをおすすめします。

実践的なデバッグ方法

CSSが適用されない場合のデバッグ手順をご紹介します。

ブラウザデベロッパーツール

// F12でデベロッパーツールを開く
// Elements タブで要素を選択
// Styles パネルで適用されているCSSを確認

デベロッパーツールを使用することで、以下のことが確認できます。

  • 実際に適用されているスタイル
  • 打ち消されているスタイル
  • 優先順位の状況

クラス名の確認

// React Developer Toolsで確認
function Component() {
  return (
    <div className="container">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

期待したクラス名が実際に適用されているかを確認します。 タイポや、クラス名の指定ミスがないかチェックしましょう。

CSS Modulesのクラス名

// CSS Modulesでは、クラス名がハッシュ化される
console.log(styles); // {container: "styles_container__3xKj2"}

function Component() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World</h1>
    </div>
  );
}

CSS Modulesでは、クラス名が自動的にハッシュ化されます。 console.log(styles)で実際に生成されるクラス名を確認できます。

ベストプラクティス

ReactでCSSを効果的に管理するためのベストプラクティスをご紹介します。

一貫したスタイリング手法

// プロジェクト全体で統一された手法を使用
// 例：CSS Modules
import styles from './Component.module.css';

function Component() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World</h1>
    </div>
  );
}

チーム全体で同じスタイリング手法を使用することで、保守性が向上します。

命名規則の統一

/* BEM命名規則の例 */
.card {
  /* Block */
}

.card__header {
  /* Element */
}

.card__header--highlighted {
  /* Modifier */
}

一貫した命名規則により、CSSの管理が容易になります。

スタイルの分離

// スタイルとロジックを分離
// styles/
//   ├── components/
//   │   ├── Button.module.css
//   │   └── Card.module.css
//   └── global.css

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

function Button({ children, variant }) {
  return (
    <button className={styles[variant]}>
      {children}
    </button>
  );
}

適切なディレクトリ構造により、スタイルの管理が効率的になります。

まとめ

ReactでCSSが反映されない問題は、原因を理解すれば確実に解決できます。

重要なポイント

  • CSSファイルのimportを忘れずに行う
  • classNameを使用する（classではない）
  • CSS Modulesでは適切なimportとクラス名指定
  • スタイルの優先順位を理解する
  • デベロッパーツールでデバッグする

おすすめの解決方法

  • CSS Modulesでクラス名の衝突を防ぐ
  • styled-componentsでCSS-in-JSを活用
  • 一貫したスタイリング手法を選択
  • 適切な命名規則を使用

適切なスタイリング手法を選択し、一貫性を保つことで、保守性の高いReactアプリケーションを構築できます。

ぜひ今回紹介した方法を参考に、ReactでのCSSスタイリングをマスターしてみてください！ 思い通りのデザインを実現できるようになるはずです。

関連記事

Untitled

2025年7月17日
29分

Untitled

2025年7月17日
30分

Untitled

2025年7月17日
30分