React中使用CSS Modules如何访问带连字符的BEM风格选择器

这是JavaScript对象属性访问的语法限制导致的。JS中使用点语法访问对象属性时，属性名必须符合标识符命名规范（仅允许包含字母、数字、下划线、$，且不能以数字开头），而Column--active里的--属于非法标识符字符，JS解析时会将--识别为自减运算符，因此直接写styles.Column--active会抛出语法错误。
你尝试用反引号包裹的写法没有生效，是因为反引号包裹的内容会被当成普通字符串，而非对象属性访问表达式，自然无法读取到styles中对应的类名。

• 方法1：使用方括号语法访问属性（无需修改CSS代码，最通用）
  把类名作为字符串放在方括号中访问即可，写法如下：

<div className={styles['Column--active']}>

• 方法2：修改CSS类名为驼峰格式
  把CSS文件中的.Column--active改名为.columnActive，即可直接用点语法访问：

<div className={styles.columnActive}>

• 方法3：配置CSS Modules自动转换类名为驼峰
  如果你使用的构建工具支持CSS Modules配置（比如webpack的css-loader、Vite），可以开启类名驼峰转换开关，无需修改原有CSS代码，即可直接在JS中用驼峰格式访问带特殊字符的类名。以webpack的css-loader配置为例：

// webpack.config.js 对应css-loader的配置项
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                exportLocalsConvention: 'camelCase'
              }
            }
          }
        ]
      }
    ]
  }
}

开启后.Column--active会自动转换为驼峰属性columnActive，直接用styles.columnActive访问即可。

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