I have a simple BootstrapVue table.
The css is defined in App.vue. Here's the code for 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>
Here's the code for 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>
The margin-top: 60px is defined in App.vue. I want to modify TableTest.vue such that it overrides the margin top in the CSS in App.vue. I want margin-top: 0px for TableTest.vue.
I am using Vue v2.6 and Bootstrap-vue.
I want to modify TableTest.vue such that it overrides the margin top in the CSS in App.vue
I earlier commented on your question that you applied margin-top: 60px in your parent component and child component is having its own box model.
Adding a code snippet to show how your component structured:
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>you can try margin-top: -60px;
Simply use
<style>
#app {
margin-top: 0;
}
</style>
In Your TestTable.vue file and it will overwrite the previous css rule given that both <style> tags are not scoped.