create-react-library组件包CSS类名哈希化致样式失效问题咨询

• create-react-library默认启用了CSS Modules，该工具会将CSS类名编译为带哈希的唯一名称（如._index__content__3NYI6），以此避免不同组件间的样式冲突。但组件对外暴露的是原始类名，外部项目使用原始类名时，无法匹配编译后的哈希类名，导致自定义样式失效。
• HTML标签选择器不会被CSS Modules修改，因此能正常生效。

根据需求可选择以下两种方案：

方案1：保留CSS Modules（推荐，避免全局样式污染） #

组件内部使用CSS Modules时，需将编译后的类名与外部传入的自定义类名合并，通过props暴露样式扩展能力：

1. 组件代码示例：

// Modal.jsx
import styles from './Modal.module.css';

const Modal = ({ className, ...props }) => {
  // 合并默认样式类与外部自定义类
  const combinedClassName = `${styles.content} ${className || ''}`;
  return <div className={combinedClassName} {...props}>{props.children}</div>;
};

export default Modal;

2. 外部项目使用时，直接传入自定义类名：

// 外部项目组件
import Modal from 'your-modal-package';
import './CustomModal.css';

const App = () => {
  return <Modal className="custom-content">模态框内容</Modal>;
};

3. 组件包内的样式文件需命名为[name].module.css，确保CSS Modules正确识别。

方案2：禁用CSS Modules（适合无需样式隔离的场景） #

修改组件包的打包配置，关闭CSS Modules，让类名保持原始名称：

1. 若使用rollup（create-react-library默认打包工具），修改rollup.config.js中postcss插件配置：

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss({
      modules: false, // 关闭CSS Modules
      extract: true, // 将样式提取为独立CSS文件
    }),
  ],
};

2. 重新打包发布组件包后，外部项目需导入组件包的样式文件，再使用原始类名：

// 外部项目使用
import Modal from 'your-modal-package';
import 'your-modal-package/dist/index.css'; // 导入组件包样式
import './CustomModal.css';

const App = () => {
  return <Modal className="content">模态框内容</Modal>;
};

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