如何在React父组件中以纯方式覆盖子组件的CSS Modules样式？

组件场景代码 #

Currency 组件 #

import classes from './Currency.module.scss';

export default function Currency({ amount }: {amount: number}) {    
    return (
        <span className={amount > 0 ? classes.positive : ''}>
            {amount}
        </span>
    );
}

Currency.module.scss #

.positive {
    color: green;
}

Container 组件 #

import classes from './Container.module.scss';
import Currency from './Currency';

export default function Container() {    
    return <Currency amount={5} />;
}

Container.module.scss #

.positive {
    color: red;
}

问题背景 #

由于CSS Modules的哈希转换机制，Currency.module.scss中的.positive会被编译为类似._positive_r2z92_1 { color: green; }的带哈希类名，Container.module.scss中的.positive则会变成._positive_4v7sd_1 { color: red; }。最终渲染的<span>仅携带子组件的哈希类名，父组件的红色样式无法生效。

以下是无需修改子组件、仅在父组件中实现纯粹覆盖的可行方案：

可行方案 #

1. 父容器作用域+元素选择器（简单场景推荐） #

如果子组件的元素类型唯一（如本例中的<span>），可以通过父容器的作用域限制，直接用元素选择器覆盖样式：

首先给Container组件添加父容器类：

import classes from './Container.module.scss';
import Currency from './Currency';

export default function Container() {    
    return (
        <div className={classes.wrapper}>
            <Currency amount={5} />
        </div>
    );
}

修改Container.module.scss：

.wrapper span {
    color: red;
    /* 若子组件样式优先级更高，可添加!important提升权重 */
}

这种方式无需修改子组件，仅对父容器内的对应元素生效，适合结构简单的场景。

2. 动态生成样式匹配子组件哈希类名（精准覆盖） #

通过导入子组件的样式类，动态生成匹配其哈希类名的样式规则，实现精准覆盖：

import classes from './Container.module.scss';
import Currency from './Currency';
import currencyStyles from './Currency.module.scss';
import { useEffect, useRef } from 'react';

export default function Container() {
    const styleRef = useRef<HTMLStyleElement>(null);

    useEffect(() => {
        if (!styleRef.current) {
            const style = document.createElement('style');
            // 拼接父容器类与子组件哈希类名，生成精准选择器
            style.textContent = `
                .${classes.wrapper} .${currencyStyles.positive} {
                    color: red;
                }
            `;
            styleRef.current = style;
            document.head.appendChild(style);
        }
        // 组件卸载时清理样式
        return () => {
            if (styleRef.current) {
                document.head.removeChild(styleRef.current);
            }
        };
    }, []);

    return (
        <div className={classes.wrapper}>
            <Currency amount={5} />
        </div>
    );
}

这种方式完全不需要修改子组件代码，且样式仅作用于当前父容器内的子组件元素，精准度高。

3. 全局选择器（不推荐复杂项目） #

若可以接受全局范围内覆盖该类样式，可直接在父组件SCSS中使用:global()：

:global(.positive) {
    color: red !important;
}

但该方式会影响所有使用.positive类的元素，仅适合小型项目或全局样式统一的场景。

内容的提问来源于stack exchange，提问作者Sergey Khachaturov