vue在父组件中给子组件内的结构设置样式

原创于 2018-11-26 14:53:11 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

文章标签：

16 篇文章

订阅专栏

本文介绍在Vue中如何使用/deep/或>>>标记穿透子组件的样式隔离，实现父组件对子组件样式的覆盖。此技巧适用于vue-loader11.2.0及更高版本，帮助开发者更好地控制组件样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件写css时，样式选择器中加上 /deep/或者 >>> 这两个标记就可以添加到到子组件结构的样式中了。
举例：

父组件

<div>
	<searchForm class="searchFormStyle"></searchForm>
<div>
<style>
	.searchFormStyle /deep/ .insideStyle{
		background-color: yellow;
	}
</style>

子组件searchForm内

<tmeplate>
	<div class="container">
		<input type="text" class="insideStyle">
		<button>搜索</button>
	</div>
</template>

另外，要注意的是，据说，在vue-loader 11.2.0之后才支持。