CSS Modules嵌套样式下设置table的tr边框无效，如何解决？

问题核心原因 #

1. tr元素的边框默认特性：table默认border-collapse为separate，单独给tr设置边框不会显示，因为表格边框模型会优先渲染table和单元格的边框，tr的边框会被覆盖或忽略。
2. CSS Modules选择器匹配逻辑：虽然你用嵌套写法定义了.catTable .catTr，但如果没处理table的边框合并属性，就算选择器匹配上，tr的边框也不会显示；另外要确保JSX中类名引用的是CSS Modules导出的哈希类名，避免全局类名冲突。

具体修改方案 #

1. 调整CSS样式，解决边框显示问题 #

给table添加border-collapse: collapse，让tr的边框能和表格边框合并渲染，同时优化选择器写法：

.catTable {
  border: 1px solid black;
  /* 关键：合并表格边框，让tr/单元格边框生效 */
  border-collapse: collapse;
}

/* 直接给tr设置边框（需配合border-collapse） */
.catTable .catTr {
  border: 1px solid pink;
}

/* 备选更可靠方案：给tr下的td/th设置边框（tr边框有时仍不生效） */
.catTable .catTr td {
  border: 1px solid pink;
}

2. 确保JSX类名引用正确 #

在组件里正确引用CSS Modules导出的类名，不要混用全局类名：

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

// 正确写法
<table className={styles.catTable}>
  <tr className={styles.catTr}>
    <td>测试内容</td>
  </tr>
</table>

额外检查点 #

• 打开浏览器开发者工具，查看tr元素的类名是否是CSS Modules生成的哈希类名（比如catTr_xxxx），确认选择器能匹配上；
• 查看样式面板，检查tr的边框样式是否被其他规则覆盖（划掉的样式表示被覆盖），如果是就提高选择器优先级（比如用子代选择器.catTable > .catTr）。

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