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

Question

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

  <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

解决此问题的一种方法（无论如何都不应该存在，因为在暗表变体中我的箭头是白色的，因此它们是可见的）是覆盖 bootstrap 的 css。

因此对于表格排序箭头 bootstrap 使用以下 3 个 css

1. 无排序

   body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ 背景图像：url(“数据：图像/svg+xml，%3csvg xmlns='http://www.w3.org/2000/svg'width='101'height='101'view-box='0 0 101 101'preserveAspectRatio='none'%3e%3cpath fill='red ' 不透明度='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='红色' 不透明度='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e% 3c/svg%3e")！重要； }

2. 排序（升序）

   body .table.b-table>tfoot>tr>[aria-sort=升序], body .table.b-table>thead>tr>th[aria-sort=升序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'opacity='.3'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； }

3. 排序（降序）

   body .table.b-table.table-dark>tfoot>tr>[aria-sort=降序]，body .table.b-table.table-dark>thead>tr>[aria-sort=降序]，body .table.b-table>.thead-dark>tr>[aria-sort=降序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'不透明度='.3'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； }

如果您注意到每个 css 内部都有一个指向 svg 元素的“background-image”属性。

在每个 svg 元素内，它们被声明为 2 个“路径”元素。

每个路径元素都有一个属性“fill”。

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

在上面的例子中我将其设置为 fill="red"

Answer 2

这是一个在 Bootstrap 5+ 上适合我的 css 解决方案。

.bootstrap-table .fixed-table-container .table thead th .both {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIAAwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAToAMABAAAAAEAAAATAAAAADKyfrgAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kr+UDfAAAAYZJREFUOBHVUztIA0EQndk7SCJEMbWlNiltrdJJ8AMigqWiQZSIIKRSFBQLQYgJFn5jZ6EoKgatFCSFha2FxEatE9QiiSY7zooHl3MvaSx0Ydid92Ye8wYW4K8erDdY5DTSUJHepddSILY/MP9eq17UIhVXBt8EChhv8uVG69XWnGwoHQ0aEi+IsIWFsoYhOzfCyQc3UdfJiBVEBae/hVR/a7ksJhXuJma4EU/t+ZBAnGPeZ9UgQvDs/vz6du/m0cLst3ay4eOYn/c0SwDN9mJ++yXATDQd9Tjwr1QrJkSxH0h0AFDRGewyVCgbfTqxX8W0yxw5mRpki7uAkl05DglepRzb6k6kHAxobfrMyiEiXQKg90egzEjpPXAKqVwrlgwnS0wsMv9mb2IbeZKwsNO7XIVbNVoxRa53xTNEUGWFgI62e1avrGbn7SqG7NM0ZYIbsqqJ02dp0IrCnSJW7iqmCtTXQaA4x4ckTKTCyTurUXebOtCOvRQCm42eXJspCmt2/H+9PwELW4FbScq8QAAAAABJRU5ErkJggg==');
}

.bootstrap-table .fixed-table-container .table thead th .desc {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ');
}

.bootstrap-table .fixed-table-container .table thead th .asc {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
}

这会将箭头的颜色更改为绿色。