Change font color of inside the react bootstrap striped table

Question

I am using this react bootstrap table with striped rows.

According to the docs, I can "Invert the colors of the table — with light text on dark backgrounds by setting variant as dark." However, the font color does not match the dark mode of my site so I would like to have a custom color. When I try to select the table elements, tr or td, it changes the color of only the non-striped rows. How do I select all the text, or even just the striped text at this point, to change the color?

Answer 1

You can customize the font color of the text inside the table rows by overriding the CSS styles. Since the striped rows have a specific class applied to them (table-striped), you can target both the regular and striped rows with a custom CSS file or a styled component.

/* 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>

To change the text color of just the striped rows, you only need to target the nth-of-type(odd) selector in your CSS.

/* 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>