React组件CSS无法渲染排查：导入正确无编译错误但样式不生效

以下是几种常见的排查方向：

• CSS选择器优先级被第三方库样式覆盖
  react-table自带默认样式，可能比你写的table、th这类基础选择器优先级更高。打开浏览器开发者工具的Elements面板，查看table元素的样式列表，你的自定义样式如果被划掉，说明被覆盖了。
  解决：提高选择器特异性，比如用.App table代替table，或者针对react-table生成的类名写样式（具体类名可在开发者工具中查看）。

• react-table的Props覆盖了元素样式
  getTableProps()、getHeaderProps()等方法会给表格元素添加内置的类名或内联样式，可能覆盖你的自定义CSS。比如检查table元素的class属性，是否有react-table的默认类。
  解决：在调用这些方法时传入自定义类名，比如getTableProps({ className: 'employee-table' })，然后CSS中用.employee-table作为父选择器编写样式。

• 项目启用了CSS Modules但未按规则使用
  如果你的项目（比如Create React App默认配置）开启了CSS Modules，直接导入.css文件后用原生类名会失效——因为类名会被编译成哈希字符串。
  解决：改用模块导入方式：

  import styles from './employee.css';
  // 组件中使用className={styles.table}这类方式引用样式类
  

• 样式表存在隐性语法问题
  即使编译没报错，也可能有拼写错误、符号遗漏（比如分号、括号）导致样式不生效。比如检查border-collapse是否拼写正确，或者选择器后的大括号是否闭合。

• 表格未实际渲染
  如果employeeData为空，或者useTable的配置错误导致rows数组为空，表格根本没生成DOM元素，自然看不到样式。可以在组件中添加console.log(rows)确认是否有数据，同时检查useTable的初始化逻辑：

  const { getTableProps, ... } = useTable({ columns, data: employeeData });
  

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