如何在 BootstraVue b-table 中更改表头颜色

Question

我想在 BootstraVue b-table 组件中更改 b-table 的颜色。 简单的例子是：

<template>
<div>
<b-table :items="items" thead-class="greenColor">
</b-table>
</div>
</template>
<style scoped>
.greenColor, .table thead th, thead, th {
background-color: #00FF00 !important;
}
</style>
<script>
export default {
data() {
return {
items: [
{name: "Paweł", surname: "Kowalski"},
{name: "John", surname: "Nowak"}
]
}
}
}
</script>

如您所见，我尝试设置thead类(并且类设置正确但不起作用(并更改thead元素的样式，但表格仍然是白色的。 你能改变这个标题的颜色吗？

以及我从package.json中的一些依赖项： "nuxt"： "^2.0.0"， "bootstrap"： "^4.1.3"， "bootstrap-vue"： "^2.0.0">

Answer 1

您面临的问题是因为您使用的是scoped样式标签。 如果要定位子组件，则需要使用深度选择器来正确定位它们。

new Vue({
el: '#app',
data() {
return {
items: [
{ first: 'Mikkel', last: 'Hansen', age: 16 }
],
fields: [
/* 
Optionally define a class per header, 
this will overlay whatever thead-class background you choose 
*/
{ key: 'first', thClass: 'bg-white text-dark' },
{ key: 'last' },
{ key: 'age' }
]
}
}
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<div id="app">
<!-- If the CSS class is globally available (like bg-dark) you can simply use it in thead-class -->
<b-table :items="items" thead-class="green-bg bg-dark text-white"></b-table>

<!-- Optinally you can use the fields property and define classes per column -->
<b-table :items="items" :fields="fields" thead-class="green-bg bg-dark text-white"></b-table>
</div>
<!-- Disabled since it doesn't work for SO snippets.
<style scoped>
/* Example of how to use a deep selector */
/deep/ .green-bg {
background-color: green;
}
<style>
-->