Vue中<style>
的scoped
和v-deep
组件样式
在vue
中,我们通过<template>
写HTML,<script>
写JavaScript,而把样式放进<style>
中。但是直接写在<style>
中的css是全局的,不同组件间的样式会互相影响。所以组件内部的样式我们一般加上scoped
标记,避免不同组件间样式的影响。但是有时候(例如引用第三方组件时)我们发现加了scoped
的样式并不起作用,所以我们会有/deep/
、>>>
、 ::v-deep
等方式使之生效。那它们各有什么作用呢?我们一步一步来。
1. 假设我们有这样的一个Layout
组件
<template>
<div class="container">
<div class="header">
Header
<div class="title">Title</div>
<div class="author">Author</div>
</div>
<div class="content">
Content
</div>
</div>
</template>
<style lang="scss">
.container {
div {
color: #fff;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.header {