Next.js中带变量的普通className如何转换为CSS Module类名

你的写法错误是因为styles.checkButtonStyle是直接访问styles对象下名为checkButtonStyle的属性，而不是访问checkButtonStyle变量存储的字符串对应的属性，自然找不到对应样式类。

1. 抽离Button专属样式：把原globals.css中所有.btn开头的样式规则剪切到单独的components/Button.module.css文件中，保留globals.css里的全局重置、:root变量、body、.main_content等全局公共样式即可。
2. 修改Button组件引入：在Button组件文件头部引入CSS Module文件

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

3. 修正className写法：使用方括号动态访问styles对象的属性，正确写法如下：

return (
  <button
    className={`${styles.btn} ${styles[checkButtonStyle]} ${styles[checkButtonSize]}`}
    onClick={onClick}
    type={type}
  >
    {children}
  </button>
)

• CSS Module仅会对你引入的module文件内的类名做哈希重命名，全局globals.css中定义的CSS变量、全局样式不受影响，在Button.module.css中可以正常使用var(--primary)这类全局变量。
• 如果需要保留部分类名不被重命名，可以用:global(.类名)语法包裹规则，这个场景下不需要用到。

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