How to customize the Bootstrap-vue's <thead>?

Question

I have the following code for my b-table:

<b-table
  small
  sticky-header
  :fields="fields"
  :items="items"
>
  ...
</b-table>

I'd like to change the ugly thead to a specific background-color and nothing works unless I use the thClass in the fields declaration.

What I've tried:

Use the thClass in the field declaration, this works, but it applies the style for each th not the whole thead/tr itself.

Using the thead-class, it kinda works like using the d-none value on it like in this example:

<b-table
  small
  sticky-header
  :fields="fields"
  :items="items"
  thead-class="d-none"
>
  ...
</b-table>

but when using a custom class to style, it only work on some styles like so:

<b-table
  small
  sticky-header
  :fields="fields"
  :items="items"
  thead-class="customClass"
> 
  ...
</b-table>
  ...
<style scoped>
.customClass{
  //display: none; //This does work when uncommented
  background-color: red !important; //This won't work!!!
}
</style>