更改 react bootstrap 条纹表内部的字体颜色

Question

我正在使用这个带有条纹行的反应引导表.

根据文档，我可以“通过将变体设置为深色来反转表格的颜色——在深色背景上使用浅色文本。”但是，字体颜色与我网站的深色模式不匹配，所以我想要自定义颜色。当我尝试选择表格元素 tr 或 td 时，它仅更改非条纹行的颜色。如何选择所有文本，甚至此时只选择条纹文本来更改颜色？

Answer 1

您可以通过覆盖 CSS 样式来自定义表格行内文本的字体颜色。由于条纹行应用了特定的类 (

table-striped

)，您可以使用自定义 CSS 文件或样式组件来定位常规行和条纹行。

/* customStyles.css */

.table-striped tbody tr,
.table-striped tbody tr:nth-of-type(odd) {
  color: RED;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

要仅更改条纹行的文本颜色，您只需要在 CSS 中定位第 nth-of-type(odd) 选择器。

/* customStyles.css */
.table-striped tbody tr:nth-of-type(odd) {
  color: BLUE;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>