如何修改React Bootstrap条纹表格的字体颜色（解决仅非条纹行生效问题）

React Bootstrap的深色条纹行样式优先级高于普通tr/td选择器，所以直接修改tr/td不会对条纹行生效，你可以用以下几种方式解决：

1. 全局覆盖所有行的字体颜色 #

用更高权重的CSS选择器，覆盖包括条纹行在内的所有单元格文本颜色：

.table-dark.table-striped tbody tr,
.table-dark.table-striped tbody tr td {
  color: #你的自定义颜色代码; /* 比如 #e0e0e0 */
}

2. 仅修改条纹行的字体颜色 #

如果只需要调整条纹行的文本颜色，使用精准匹配Bootstrap条纹行的选择器：

.table-dark.table-striped > tbody > tr:nth-of-type(odd) {
  color: #你的自定义颜色代码;
}

3. 利用Bootstrap CSS变量快速修改 #

Bootstrap为表格样式定义了内置CSS变量，直接覆盖--bs-table-striped-color变量就能修改深色条纹行的文本颜色，这种方式更简洁：

<Table striped variant="dark" style={{ '--bs-table-striped-color': '#你的自定义颜色代码' }}>
  {/* 表格内容 */}
</Table>

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