如何更改bootstrap-vue表文本颜色

<b-table>
  <template #cell(name)="data">
    <span style="color: red">{{ data.value }}</span>
  </template>
</b-table>

<style>
  .red-text {
    color: red;
  }
</style>

<b-table>
  <template #cell(name)="data">
    <span class="red-text">{{ data.value }}</span>
  </template>
</b-table>

<b-table>
  <template #cell(name)="data">
    <span :style="{ color: data.value === 'John' ? 'red' : 'blue' }">{{ data.value }}</span>
  </template>
</b-table>