how can i change hover color to red in bootstrapvue b-table

Question

I use bootstrapvue compoentp and i want to change hover color tored. I use my stytle ,it doesn't work. how ca i do ?

my code:

<div>
<b-table  class="table-sm table-hover" fixed bordered striped ></b-table>
</div>

<style>
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: red !important;
</style>
}

Answer 1

You can check the example of Using variants for table cells on official doc

<template>
  <div>
    <b-table hover :items="items"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          {
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson',
            _rowVariant: 'danger'
          },
          {
            age: 40,
            first_name: 'Thor',
            last_name: 'MacDonald',
            _cellVariants: { age: 'info', first_name: 'warning' }
          },
          { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
        ]
      }
    }
  }
</script>