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?
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>