在Next.js中修改CSS Module变量实现页面随机配色

我想在Next.js项目中实现页面加载或刷新时随机生成配色，且不使用非纯CSS类。尝试通过colorChange.js修改sliderpage.module.css中的--c1、--c2变量，但没有效果，相关代码如下：

index.js #

import styles from '../styles/sliderpage.module.css'

import Head from 'next/head'

import './api/mouseListener'
import './api/colorChange'

export default function Home() {
return (
     <div class={styles.slide_wrap}>
       <div class={styles.main}>
         <Head>
           <title>Title of Website</title>
           <meta name="description" content="Site under construction." />
           <link rel="icon" href="/favicon.svg" />
         </Head>
         <div id="left-side" class="side">
           <h2 class="title">
             Company name <br />will
             <span class="fancy"> brb.</span>
           </h2>
         </div>
         <div id="right-side" class="side">
           <h2 class="title">
             Company name <br />will
             <span class="fancy"> brb.</span>
           </h2>
         </div>
       </div>
     </div>
   )
 }

colorChange.js #

if (typeof window === "object") {
function random(min,max) {
    const num = Math.floor(Math.random()*(max-min)) + min;
    return num;
  }

function randomColor() {
    return `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`;
  }

const stylesheet = document.styleSheets[1];
const slideWrapper = [...stylesheet.cssRules].find((r) => r.selectorText === "slide_wrap");

function setRandomColor() {
    const newColor = randomColor();
    slideWrapper.style.setProperty('--c1', newColor);
    slideWrapper.stlye.setProperty('--c2', newColor);
  }
}

sliderpage.module.css #

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');
.slide_wrap {
  --dark: rgb(20, 20, 20);
  
  --c1: rgb(6, 21, 39);
  --c2: rgb(124, 145, 204);
  
  --left-color: var(--c1);
  --right-color: var(--c2);
}

.main {  
  background-color: var(--dark);
  margin: 0px;
}

问题原因分析 #

1. CSS Modules类名哈希问题：Next.js的CSS Modules会为类名添加唯一哈希（比如.slide_wrap_abc123），原代码中通过selectorText === "slide_wrap"无法匹配到实际生效的CSS规则。
2. 未执行颜色设置函数：setRandomColor仅定义未调用，不会触发变量修改逻辑。
3. 拼写错误：slideWrapper.stlye.setProperty中的stlye应为style。
4. 样式表索引不可靠：document.styleSheets[1]的索引可能因打包环境变化而改变，无法稳定获取目标样式表。
5. JSX语法错误：Next.js的JSX必须使用className而非class，原代码中的class属性会被忽略，导致CSS类名不生效。

修正方案（推荐方式） #

直接通过DOM元素设置CSS变量，避开CSS Modules哈希问题，逻辑更稳定：

1. 修改index.js（修正JSX语法+添加DOM标识）

import styles from '../styles/sliderpage.module.css'
import Head from 'next/head'
import './api/mouseListener'
import './api/colorChange'

export default function Home() {
  return (
    <div id="slide-wrap" className={styles.slide_wrap}>
      <div className={styles.main}>
        <Head>
          <title>Title of Website</title>
          <meta name="description" content="Site under construction." />
          <link rel="icon" href="/favicon.svg" />
        </Head>
        <div id="left-side" className="side">
          <h2 className="title">
            Company name <br />will
            <span className="fancy"> brb.</span>
          </h2>
        </div>
        <div id="right-side" className="side">
          <h2 className="title">
            Company name <br />will
            <span className="fancy"> brb.</span>
          </h2>
        </div>
      </div>
    </div>
  )
}

2. 修改colorChange.js（调整变量修改逻辑）

if (typeof window === "object") {
  function random(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  function randomColor() {
    // 改为256以覆盖0-255完整RGB范围
    return `rgb(${random(0, 256)}, ${random(0, 256)}, ${random(0, 256)})`;
  }

  function setRandomColor() {
    const slideWrapEl = document.getElementById('slide-wrap');
    if (!slideWrapEl) return;
    slideWrapEl.style.setProperty('--c1', randomColor());
    slideWrapEl.style.setProperty('--c2', randomColor());
  }

  // 页面加载完成后执行一次
  window.addEventListener('load', setRandomColor);
}

关键说明 #

• Next.js的JSX强制使用className属性，class会被框架忽略，必须修正。
• 通过DOM元素直接设置CSS变量的方式，完全避开CSS Modules的类名哈希问题，适配所有打包场景。
• 随机函数参数调整为(0,256)，才能生成0-255的完整RGB颜色值。

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