React项目中CSS Module仅path样式生效，其余样式失效求助

在React项目中使用CSS Modules时，Header组件里只有path标签的样式生效，.header-container和.header-title的样式完全没效果，相关代码如下：

Header.js 组件 #

import React from 'react';
import '../../../asset/css/updated/header.module.css'

const Header = () => {
    return (
        <div className='header-container'>
            <h1 className='header-title'>Some text here</h1>
            <svg width="130%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#56b5e3"></stop><stop offset="95%" stop-color="#7d58a5"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,350 0,350 C 136.8,427.20000000000005 273.6,504.40000000000003 456,480 C 638.4,455.59999999999997 866.4000000000001,329.6 1038,291 C 1209.6,252.4 1324.8,301.2 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity=".9" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path></svg>
        </div>
    );
};

export default Header;

header.module.css 文件 #

path{
    fill:url(#gradient) !important;
}
.header-container{
    position: relative;
}
.header-title{
    position: absolute;
    color: white;
    margin-top: 10px;
    margin-left: 10px;
}

问题原因 #

• CSS Modules核心特性是局部作用域，会给类选择器自动添加哈希后缀（比如.header-container会变成.header-container_abc123），避免样式冲突。
• 直接用字符串'header-container'作为类名，和CSS Modules处理后的哈希类名不匹配，导致样式不生效。
• path是标签选择器，CSS Modules不会修改标签选择器名称，所以全局生效，这就是只有它样式有效的原因。

解决方法 #

1. 导入CSS模块时必须赋值给变量，通过变量访问类名
2. 组件中使用styles.类名的方式引用样式类

修改后的Header.js代码：

import React from 'react';
// 将CSS模块导入为styles变量
import styles from '../../../asset/css/updated/header.module.css'

const Header = () => {
    return (
        // 使用styles['header-container']访问带哈希的类名
        <div className={styles['header-container']}>
            <h1 className={styles['header-title']}>Some text here</h1>
            {/* React中需用className代替class */}
            <svg width="130%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" className="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#56b5e3"></stop><stop offset="95%" stop-color="#7d58a5"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,350 0,350 C 136.8,427.20000000000005 273.6,504.40000000000003 456,480 C 638.4,455.59999999999997 866.4000000000001,329.6 1038,291 C 1209.6,252.4 1324.8,301.2 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity=".9" className="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path></svg>
        </div>
    );
};

export default Header;

额外优化建议 #

如果觉得styles['header-container']写法麻烦，可把CSS类名改成驼峰命名：

.headerContainer{
    position: relative;
}
.headerTitle{
    position: absolute;
    color: white;
    margin-top: 10px;
    margin-left: 10px;
}

这样组件里可直接写className={styles.headerContainer}，代码更简洁。

内容的提问来源于stack exchange，提问作者Mehedi Hasan