为何两个引入不同CSS的React表格组件样式完全相同？

你的问题核心是React中默认引入的CSS是全局作用域，如果两个组件的CSS文件里使用了相同的类名（比如都用.table、.row这类通用选择器），样式就会互相覆盖，导致两个表格看起来完全一致。下面是几种实用的解决方式：

1. 使用CSS Modules（推荐，无需额外依赖） #

React项目默认支持CSS模块化，只需要修改CSS文件名格式为[组件名].module.css，然后通过导入对象来使用类名，系统会自动给类名添加唯一哈希后缀，避免冲突。

举个例子：

• 将ExpenseEntryItemList.css重命名为ExpenseEntryItemList.module.css
• 在组件中导入并使用：

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

// JSX中引用类名
<table className={styles.expenseTable}>
  <tr className={styles.expenseRow}>
    {/* 表格内容 */}
  </tr>
</table>

• MovieBooking组件同理，将CSS文件改为MovieBooking.module.css，使用styles.movieTable这类独特的类名。

2. 采用CSS-in-JS方案 #

直接在组件内部定义样式，样式完全属于当前组件，不会污染全局。常用的库比如styled-components：

先安装依赖：

npm install styled-components

然后在组件中编写样式：

import styled from 'styled-components';

// 定义专属表格组件
const ExpenseTable = styled.table`
  width: 100%;
  border-collapse: collapse;
  background-color: #f5f5f5;
  /* 其他自定义样式 */
`;

const ExpenseTd = styled.td`
  padding: 8px;
  border: 1px solid #ddd;
`;

// 使用自定义组件
function ExpenseEntryItemList() {
  return (
    <ExpenseTable>
      <tr>
        <ExpenseTd>支出项目</ExpenseTd>
        {/* 其他内容 */}
      </tr>
    </ExpenseTable>
  );
}

MovieBooking组件中定义自己的MovieTable、MovieTd即可，样式完全隔离。

3. 手动添加命名空间前缀 #

如果不想改文件格式或引入新库，可以给每个组件的CSS类名添加独特前缀，确保类名不重复：

/* ExpenseEntryItemList.css */
.expense-entry-table {
  width: 100%;
  border: 1px solid #ccc;
}
.expense-entry-table td {
  padding: 10px;
}

/* MovieBooking.css */
.movie-booking-table {
  width: 80%;
  border: 2px solid #333;
}
.movie-booking-table td {
  padding: 12px;
}

然后在组件JSX中对应使用className="expense-entry-table"和className="movie-booking-table"即可。

额外检查 #

如果上述方法没用，检查App.css中是否存在全局的table、td等样式，这类全局样式会覆盖组件内的样式。可以给全局样式添加限定范围，或者用更具体的选择器来避免影响。

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