如何在nuxt中的引导4中更改b表排序箭头的颜色？

Question

​

​

我使用nuxt和引导程序，但是默认的表中排序箭头对于我的背景来说太暗了。如何更改排序箭头的颜色？

  <b-table
    show-empty
    small
    striped
    hover
    stacked="md"
    :items="rankingList"
    :fields="fields"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    :sort-direction="sortDirection"
  >

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"
  }

Answer 1

解决这个问题的一种方法是重写引导带的css，因为在暗表变体中，我的箭头是白色的，所以它们是可见的。

因此，对于表排序箭头，引导程序使用以下3个css

1. 无排序

body .table.b-table>tr>aria-排序=无，body .table.b-table>头>tr>tr>tharia-排序=无{背景图像:url(数据:image/svg+xml，%3 3csvg xmlns='http://www.w3.org/2000/svg‘http://www.w3.org/2000/svg’宽幅=‘101’高度=‘101’视图-框=‘0 0 101 101’http://www.w3.org/2000/svg-box=‘0 0 101 101’aria=‘none’%3e%3e%3 3cpath=‘3’3cpath=‘3’d='M51 1l25 24 22-Hl25‘-22 z’/%3e%3 3cpath填充=‘红色’不透明度=‘M51’101l25‘22-22’‘/%3cpath%=’M51‘101ll25/22 z’%！

1. 排序(升序)

body .table.b-table>tfoot>tr>aria-排序=升序，体.table.b-table>thead>tr>tharia-sort=ascending{背景-图像:url(数据:图像/svg+xml，%3 3csvg xmlns='http://www.w3.org/2000/svg‘http://www.w3.org/2000/svg’宽幅=‘101’高度=‘101’视图-框=‘0 0 101’保存aria=‘none’%3e%3 3cpath填充=‘red’d‘3e%3c/svg%3e！’=‘51’d‘m’m‘101l25-23 24 -H1 22l25 22 z/%3e%3c/svg%3e“！！)

1. 排序(降序)

body .table.b-table.table-dark>tfoot>tr>aria-sort=descending，body .table.b-table.table-dark>thead>tr>aria-sort=descending，body .table.b-table>.thead-dark>tr>aria-sort=descending{背景-.table.b-table>.thead-dark>tr>aria-sort=descending{：url(“数据:image/svg+xml，%3 3csvg xmlns='http://www.w3.org/2000/svg‘宽度=’101‘高度=’101‘视图-框=’0 0 101 101‘保存.AspectR修=’none‘%3e%3 3cpath填充=’红色‘不透明度=’3‘d=’M 51 1l25 23 24 22H1 l25-22z‘/%3e%3 3cpath填充=’红色‘d='M51 101l25-23 24-22H1 25 22z’/%3c/svg%3e“)！}

如果您注意到每个css内部都有一个指向svg元素的“背景图像”属性。

在每个svg元素中，它们被声明为2 "path“元素。

每个path元素都有一个属性"fill“。

您可以更改属性的值，并指向任何您喜欢的颜色。

在上面的示例中，我将其设置为fill="red“。