如何从父级修改组件的样式？
如何从父级修改组件的样式？
提问于 2017-11-08 19:08:51
我需要从它的父组件修改Vue组件的一些CSS属性。它将覆盖组件中定义的CSS。
首先，我希望对于组件<my-component>，我可以直接从父元素中对它进行样式设计，就像其他元素一样：
my-component {
font-weight: bolder;
}这不管用。
我尝试过的第二个解决方案是将道具传递给组件，并在样式设计中使用相关信息。这是可行的，但我仍然希望找到更接近继承机制的解决方案(在继承机制中，父元素的设置将优先于子元素的设置，类似于<b>元素的样式设置)。
有这样的机制吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-09 14:17:43
当Vue呈现组件的模板时，自定义组件标记将被替换为它们的模板定义。因此，尝试在CSS中选择自定义组件的标记将无法工作，因为该标记不在DOM中。
只需向子组件的根元素添加一个class属性(因为这就是插入DOM而不是自定义组件标记的内容)。为了理智起见，我只是使类名与组件的名称相同。然后，您可以通过.my-component在CSS中的任何位置选择组件。
下面是一个简单的例子：
Vue.component('my-component', {
template: `<div class="my-component">Foo</div>`,
})
new Vue({ el: '#app' }).my-component { color: goldenrod; }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<my-component/>
</div>
Stack Overflow用户
发布于 2017-11-08 19:38:27
寻找灵感：
var comp = {
template: '<p><slot></slot></p>'
}
new Vue({
el: '#app',
data: {
inParent: true
},
components: {
comp
},
methods: {
change () {
this.inParent = !this.inParent
}
}
}).blue {
background-color: blue
}<div id="app">
This button is in parent:
<button @click="change">change child style</button>
<comp :class="{blue: inParent}">This is child component</comp>
</div>
<script src="https://unpkg.com/vue"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47187747
复制相关文章
相似问题
腾讯云开发者
