这个BootstrapVue表如何覆盖应用程序css

Question

我有一个简单的BootstrapVue表。

css在App.vue中定义。这是App.vue的代码。

<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<TestTable msg="testing"/>
</div>
</template>
<script>
import TestTable from './components/TestTable.vue'
export default {
name: 'App',
components: {
TestTable
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;  
}
</style>

这是TestTable.vue的代码。

<template>
<div>
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
}
</script> 

margin-top: 60px在App.vue中定义。我想修改TableTest.vue，使其覆盖App.vue中CSS中的页边空白顶部。我要margin-top: 0px代替TableTest.vue。

我使用的是Vue v2.6和Bootstrap Vue。

Answer 1

我想修改TableTest.vue，使其覆盖App.vue 中CSS中的页边空白

我之前评论过您的问题，即您在父组件中应用了margin-top: 60px，而子组件有自己的长方体模型。

添加代码片段以显示组件的结构：

Vue.component('item', {
template:'#list-template',
props:['item'],
});
var vm = new Vue({
el:"#app",
computed: {
limitedItems() {
return ['item1'];
}
}
});

#app {
border: 2px solid black;
margin-top: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<item v-for="item in limitedItems" :item="item" style="border: 2px solid green"></item>
</div>
<template id="list-template">
<p>{{ item }}</p>
</template>

Answer 2

您可以尝试margin-top: -60px;

Answer 3

只需使用

<style>
#app {
margin-top: 0;
}
</style>

在您的TestTable.vue文件中，如果两个<style>标记都没有作用域，它将覆盖以前的css规则。