vue3 scoped 父组件向下影响到子组件内部的样式

目录

一、::v-deep

二、:deep()

三、混合使用局部与全局样式（不推荐）

---

一、::v-deep

        ::v-deep 这个选择器是 Vue 3 中用于替代 Vue 2 中的 /deep/、/::v-deep/ 或 >>> 等旧版穿透样式的方法，只在scoped样式中起作用。

<style scoped lang="scss">
.notice {

	::v-deep .uni-icons {
		color: #28B389 !important;
	}
}
</style>

二、:deep()

官方文档 

https://cn.vuejs.org/api/sfc-css-features#deep-selectors

        :deep() 选择器允许定义一个或多个选择器，这些选择器将不会被<style scoped>的封装机制所限制，从而可以影响到子组件的样式。

<style scoped lang="scss">
.notice {
    // 多个写法
   :deep() {
		.uni-icons {
			color: #28B389 !important;
		}
        // ...
	}

    // 单个写法
    :deep(.uni-icons) {
		color: #28B389 !important;
	}
}
</style>

三、混合使用局部与全局样式（不推荐）

官方文档

https://cn.vuejs.org/api/sfc-css-features#mixing-local-and-global-styles

        在同一个组件中同时包含作用域样式和非作用域样式。

<style>
/* 全局样式 */
.notice {
	.uni-icons {
		color: #28B389 !important;
	}
}
</style>

<style scoped>
.notice {
   /* 局部样式 */
}
</style>