React CSS Modules中使用id选择器设置元素样式的实现咨询

结论 #

该需求完全可以实现。默认配置下React CSS Modules只会对类选择器做局部模块化处理，id选择器默认不会被转换，需要按照以下两种场景对应操作：

方法1：使用局部id选择器（推荐，无全局污染） #

如果需要id也和类选择器一样带哈希后缀，避免全局id冲突，操作如下：

1. 修改CSS文件，用:local()包裹需要模块化的id选择器：

/* Button.module.css */
:local(#specialButon) {
 margin: 5px;
}

.notSpecialButton {
 margin: 5px;
}

2. 修改组件代码，id属性直接引用style对象中导出的id值，不要写死字符串：

import style from './Button.module.css';

function Button() {
  // 函数组件直接返回JSX即可，不需要调用render方法
  return (
    <div>
      <button id={style.specialButon}>Special</button>
      <button className={style.notSpecialButton}>Not Special</button>
    </div>
  )
}

export default Button

处理后最终渲染的id会自动带上哈希后缀（比如specialButon__2fKXz），对应的CSS选择器也会同步转换，完全不会和其他组件的id冲突。

如果项目中大量使用局部id，不想每次都加:local()，可以修改打包工具的CSS Modules配置，默认对id做模块化处理，以下是webpack中css-loader v6+的配置示例：

// webpack.config.js 片段
module: {
  rules: [
    {
      test: /\.module\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[name]__[local]--[hash:base64:5]',
              // 配置同时对id和class做局部处理
              scopeIncludes: ['id', 'class']
            }
          }
        }
      ]
    }
  ]
}

配置完成后，CSS中直接写#specialButon即可自动模块化，不需要再加:local()包裹。

方法2：使用全局id选择器 #

如果你的id本身是全局唯一的，不需要模块化处理，操作如下：

1. 修改CSS文件，用:global()包裹id选择器，标记为全局样式：

/* Button.module.css */
:global(#specialButon) {
 margin: 5px;
}

.notSpecialButton {
 margin: 5px;
}

2. 组件中直接写死id属性即可：

<button id="specialButon">Special</button>

注意：该方法的id是全局生效的，需要确保整个项目中该id唯一，避免样式冲突。

补充说明 #

你的示例代码存在几处小问题，调整后可正常运行：

• CSS文件名注意统一，示例中命名为Button.modules.css的话，导入路径要对应为./Button.modules.css
• 函数组件不需要调用render方法，直接返回JSX即可
• <button>标签需要闭合，写法为<button>内容</button>

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