外观
插槽样式
- Authors
- Name
- Elone Hoo
- Me
- @elonehoo
如果我们想要将样式应用于 Vue.js 组件中的插槽内容,可以使用 :slotted
伪选择器。例如:
vue
<style scoped>
:slotted(p) {
margin: 15px 5px;
}
</style>
此外,还可以使用 :global 将样式应用于全局范围,即使在 <style scoped>
块内。例如:
vue
<style scoped>
:global(body) {
margin: 0;
padding: 0;
}
</style>
如果需要添加很多全局样式,则添加第二个 <style>
块可能更容易。例如:
vue
<style scoped>
:slotted(p) {
margin: 15px 5px;
}
</style>
<style>
body {
margin:0;
padding:0;
}
</style>
有关更多信息,请参阅文档:https://cn.vuejs.org/api/sfc-css-features.html