How do I properly apply a different color to the whole table or a row in 5.3.0?

[lipis]

Before 5.3.0 I used simply adding text-muted to the <table> or to the <tr> and everything was muted. That's not the case anymore.

<table class="table text-muted">
  ...    
</table>

<table class="table">
  <tr class="text-muted">
    ...
  </tr>
</table>

For example if I have the following cases what should be the proper SCSS for the .custom class to change the color of the whole table or a specific row?

<table class="table custom">
  ...    
</table>

<table class="table">
  <tr class="custom">
    ...
  </tr>
</table>

For now the best I could achieve is the following:

.custom {
  color: red;
  --bs-table-color: red;
}

[julien-deramond]

Hey @lipis
From what I can see there, the approach seems good, and should work even without defining color: red.
If you want to keep the equivalent of muted text, the following should be OK:

.table-text-body-secondary {
  --bs-table-color: #{$body-secondary-color};
}

And then use .table-text-body-secondary as you used .custom in your examples.

(/cc @louismaximepiton might be a side effect of https://github.com/twbs/bootstrap/pull/37084/files that wasn't planned)

[louismaximepiton]

Thanks a lot to answer this discussion! It's indeed a side effect. Thinking about this, I don't know if we can conciliate easily both.

I'd just add that if you implement dark mode, you might want to use var(--bs-secondary-color) instead of $body-secondary-color.

[lipis]

Thank you @julien-deramond.. indeed text-muted is deprecated and changed to text-body-secondary but I still have issues. When I'm not using <tbody> it works fine as expected only with color and not with the --bs-table-color..

The main idea is that I have a table that looks like this:

<table class="table table-bordered">
  <tbody>
    <tr class="revenue">
      <td>Income</td>
      <td>400</td>
    </tr>
    <tr class="expense">
      <td>Expense</td>
      <td>-250</td>
    </tr>
    <tr class="text-secondary">
      <td>Secondary</td>
      <td class="text-secondary">666</td>
    </tr>
  </tbody>
</table>

And I want to color the text with a different color depending on the type.. If I omit any of the following it doesn't work, and works only if I add both values for color and --bs-table-color as following:

.expense {
  color: red;
  --bs-table-color: red;
}

.revenue {
  color: green;
  --bs-table-color: green;
}

Notice that the last row, when I apply to the row it does nothing, but only when I apply it to the <td> it works..

[louismaximepiton]

Hey again,

thanks a lot for your perseverance. Can you provide a CodePen or StackBlitz of your not working example because I tried this on my side and it seems to work pretty well 🤔

Regards

[lipis]

Thanks @louismaximepiton.. this seem that it works in your case, have to check why it doesn't in my case with the NextJS setup most likely...!