为何NextJS会修改部分元素的ID或类名？技术咨询

问题原因 #

你用了CSS Modules，它会自动给通过style.xxx引用的类名/ID添加随机哈希后缀，目的是避免样式冲突。但直接写字符串ID（比如HomePage里的id='wineata'）不会被CSS Modules处理，所以能保留原样；而Overlay组件里用style.overlay这种导出变量设置ID，就会被加上哈希，变成overlay_overlay___U_wp这种格式。

解决办法 #

1. 直接写固定字符串ID（最简单，适合依赖jQuery的场景）

放弃用CSS Modules变量设置ID，直接写字符串：

function Overlay() {
    return <div id="overlay"><Region id="overlay_svg" className="overlay_svg" /></div>
}

这样渲染后的ID就是你指定的overlay和overlay_svg，jQuery可以直接通过$('#overlay')获取元素。

2. 用React的Ref替代jQuery（推荐，符合React生态）

React官方推荐用Ref直接获取DOM节点，不需要依赖jQuery：

import { useRef, useEffect } from 'react';

function Overlay() {
    // 创建Ref对象
    const overlayRef = useRef(null);
    const svgRef = useRef(null);

    // 组件挂载后操作DOM
    useEffect(() => {
        if (overlayRef.current) {
            // 这里直接操作overlay元素，比如：
            // overlayRef.current.style.display = 'block';
            console.log('获取到overlay元素:', overlayRef.current);
        }
        if (svgRef.current) {
            console.log('获取到svg元素:', svgRef.current);
        }
    }, []);

    // 把Ref绑定到元素上，类名继续用CSS Modules隔离样式
    return (
        <div ref={overlayRef} className={style.overlay}>
            <Region ref={svgRef} className={`${style.overlay_svg} overlay_svg`} />
        </div>
    );
}

3. 用CSS Modules的:global()保留固定ID

如果既要保留CSS Modules的样式隔离，又要固定ID，可以在CSS文件里用:global()包裹ID选择器，这样哈希不会作用在这个ID上：

/* 你的CSS Modules文件 */
.overlay {
    /* 正常的局部样式 */
}

:global(#overlay_svg) {
    /* 全局ID样式，不会被哈希 */
}

然后组件里直接写字符串ID：

function Overlay() {
    return (
        <div id="overlay" className={style.overlay}>
            <Region id="overlay_svg" className={`${style.overlay_svg} overlay_svg`} />
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Jurica Slovinac