bootstrap vue ２系でテーブルのヘッダーのフォントサイズが変更できない

Question

前提・実現したいこと

bootstrap vue ２系でテーブルのヘッダーのフォントサイズが変更できません。

bodyのfont sizeに関しては 公式docでクラスが適応できる説明があったのでtable-class = "table-font-size"の部分で .table-font-size{font-size: 10px;}を指定すれば変更できました。

こちらでheaderも変わってくれると思ったのですがheaderだけそのままの大きさになってしまったので、以下で色々試したのですがうまく行っておらず質問させて頂いております。

発生している問題・エラーメッセージ

該当のソースコード

<b-table
  show-empty
  striped
  hover
  fixed
  table-class = "table-font-size"
  :items="rankingList"
  :fields="fields"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  :sort-direction="sortDirection"
>

<style>
.table-font-size{
  font-size: 10px;
}
</style>

package.json

  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "bootstrap-vue": "^2.15.0",
    "chart.js": "^2.9.4",
    "chartjs-plugin-zoom": "^0.7.7",
    "node-sass": "^4.11.0",
    "nuxt": "^2.0.0",
    "sass-loader": "^7.1.0",
    "vue-chartjs": "^3.5.1",
    "vue-template-compiler": "^2.6.11",
    "vue2-transitions": "^0.3.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "vue-cli-plugin-i18n": "^0.5.1"
  }

試したこと

ソースを読んでヘッダーのフォントサイズに関係ありそうな以下の部分を全てoverrideは試したのですがうまく行ってないです。

.table.b-table > thead > tr > .table-b-table-default {
  font-size: 10px;
}
.b-table-sticky-header > .table.b-table > thead > tr > th {
  font-size: 10px;
}
.b-table-sticky-header > .table.b-table > thead > tr > .b-table-sticky-column{
  font-size: 10px;
}
.table-responsive > .table.b-table > thead > tr > .b-table-sticky-column{
  font-size: 10px;
}
[class*="table-responsive-"] > .table.b-table > thead > tr > .b-table-sticky-column {
  font-size: 10px;
}
.table.b-table > thead > tr > .table-dark[aria-sort="none"]{
  font-size: 10px;
}
.table.b-table > thead > tr > .table-dark[aria-sort="ascending"]{
  font-size: 10px;
}
.table.b-table > thead > tr > .table-dark[aria-sort="descending"]{
  font-size: 10px;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[plasticgrammer]

確認ですが、CSSのクラス table-font-size は、b-tableを使うコンポーネントのvueファイル内にscopedがついていないstyleで宣言している という理解で正しいでしょうか。

あと、開発者ツールにて期待しているクラスが適用されているか確認してみてください。

Answer 1

対象バージョンでの検証はできていませんが、b-tableタグのthead-class属性を使用すればできるのではないでしょうか。

<b-table
  show-empty
  striped
  hover
  fixed
  thead-class = "table-font-size"
  :items="rankingList"
  :fields="fields"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  :sort-direction="sortDirection"
>

Comments

[yeahyeah]

thead-class もthead-tr-classも試したのですがダメでした。。
何か考えられる理由はありますでしょうか？

[yeahyeah]

thead-class="bg-primary thead-font-size text-white"で文字の色や背景は変わるのですが、fontだけ変わらない状況です。