Bootstrap Table data-header-style属性中classes配置不生效问题求助

我之前在使用Bootstrap Table的data-header-style属性时也碰到过一模一样的问题！你的代码逻辑其实是对的，headerStyle函数的返回格式也符合官方要求，之所以my-header类的背景色没生效，核心原因是自定义样式的优先级低于Bootstrap Table默认的表头样式。

问题分析 #

Bootstrap Table的表头单元格默认会带上table-light（或其他主题关联类），这些类的背景色样式优先级比你单独定义的.my-header更高，导致自定义背景色被覆盖。而css对象里的内联样式（比如font-weight、color）优先级高于类样式，所以能正常生效。

解决方案 #

有两种简单的修复方式，按需选择即可：

方式一：提升自定义样式优先级

给my-header类加上!important强制覆盖默认样式：

.my-header {
  background-color: aqua !important;
}

方式二：使用更精确的CSS选择器

利用CSS选择器优先级规则，用更具体的选择器定位表头单元格，无需!important也能生效：

.table thead th.my-header {
  background-color: aqua;
}

修改后的完整代码示例 #

这里是用方式二调整后的完整代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.1/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.27.1/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-header-style="headerStyle" data-url="json/data1.json" >
<thead>
<tr>
<th data-field="id"> Item ID </th>
<th data-field="name"> Item Name </th>
<th data-field="price"> Item Price </th>
</tr>
</thead>
</table>
<script>
function headerStyle(column) {
  return {
    css: {
      'font-weight': 'normal',
      color : 'blue'
    },
    classes: 'my-header'
  }
}
</script>
<style>
.table thead th.my-header {
  background-color: aqua;
}
</style>

你可以测试一下，这样my-header类的背景色就能正常显示了！另外也可以在headerStyle函数里加个console.log(column)，确认函数确实被触发，排除函数未调用的情况。

内容的提问来源于stack exchange，提问作者albeiroval