React中能否在不同组件中使用同一个module.css文件？

作为React初学者，你完全可以放心地在多个组件里复用同一个.module.css文件——这不仅是可行的，还是复用通用样式的绝佳方案，能帮你减少重复代码，保持样式的一致性。

直接导入复用的基本做法 #

最简单的方式就是在需要的组件里直接导入同一个CSS Module文件，然后使用其中的类名：

比如我们有一个sharedStyles.module.css：

.card {
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.text-muted {
  color: #666;
  font-size: 0.9rem;
}

然后在UserCard.jsx里导入使用：

import styles from './sharedStyles.module.css';

export default function UserCard({ name }) {
  return (
    <div className={styles.card}>
      <h3>{name}</h3>
      <p className={styles['text-muted']}>用户卡片</p>
    </div>
  );
}

再在ProductCard.jsx里同样导入复用：

import styles from './sharedStyles.module.css';

export default function ProductCard({ title }) {
  return (
    <div className={styles.card}>
      <h3>{title}</h3>
      <p className={styles['text-muted']}>商品卡片</p>
    </div>
  );
}

关于CSS Module哈希的小说明 #

你可能会担心：CSS Module不是靠生成唯一哈希类名避免冲突吗？复用同一个文件会不会有问题？

其实完全不用担心——CSS Module的哈希值是基于文件路径+类名生成的，所以同一个.module.css文件里的类名，不管被多少组件导入，生成的哈希类名都是一致的。这意味着两个组件用的是同一个最终类名，样式完全统一，也不会和其他样式产生冲突。

进阶：组件专属样式+共享样式 #

如果某个组件需要在共享样式的基础上做个性化修改，不用修改共享文件，可以用CSS Module的composes特性来组合样式：

比如创建ProductCard.module.css：

/* 复用sharedStyles里的card样式，再添加自己的专属样式 */
.card {
  composes: card from './sharedStyles.module.css';
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

然后在ProductCard.jsx里导入自己的样式文件即可：

import styles from './ProductCard.module.css';

export default function ProductCard({ title }) {
  return (
    <div className={styles.card}>
      <h3>{title}</h3>
      <p className={styles['text-muted']}>商品卡片</p>
    </div>
  );
}

这样既保留了共享样式的统一性，又能给特定组件添加个性化样式，非常灵活。

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