React-Electron项目中React-Quill组件导入后样式不生效问题

你的webpack配置中对所有CSS文件全局开启了CSS Modules模块化处理，且未排除node_modules下的第三方依赖样式：

• react-quill组件内部的DOM类名是硬编码的原生ql-前缀格式，不会被webpack转换
• 你导入的react-quill/dist/quill.snow.css中的选择器被CSS Modules转换成了带组件前缀+哈希的格式（如.RichTextEditor__ql-container__SP9Yv），和实际DOM类名无法匹配，导致样式失效
• CDN引入的样式没有经过webpack编译，类名保持原生格式，因此可以正常匹配生效

• 调整webpack的css-loader配置，区分业务代码样式和第三方依赖样式的处理逻辑，仅对业务代码（通常是src目录下的文件）开启CSS Modules，排除node_modules目录下的样式：

// webpack.config.js 中module.rules的css相关配置示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/, // 排除第三方依赖样式
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // 仅业务代码开启CSS Modules
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: /node_modules/, // 仅处理第三方依赖样式
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false, // 第三方样式不开CSS Modules，保留原生类名
            }
          }
        ]
      }
    ]
  }
}

• 如果你使用的是craco、react-app-rewired等工具定制Create React App配置，或者是Electron的定制构建配置，按照同样逻辑修改对应配置中的css-loader规则即可
• 临时规避方案：如果暂时不方便修改webpack配置，可以在全局样式文件中用:global()包裹quill的原生类名样式，强制不做模块化转换：

/* 全局样式文件中添加 */
:global {
  @import 'react-quill/dist/quill.snow.css';
}

配置修改完成后重启项目，检查DOM类名如果恢复为原生ql-前缀格式，样式即可正常生效。

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