问题
最近在学习用vue3推荐的Naive UI 来搭建一个前端个人博客,搭建登录页面的时候呢,遇到form表单的form-item的--n-feedback-height高度在浏览器修改能够生效,但是复制浏览器的类名到本地代码的时候,修改保存之后却不生效。
解决办法
使用伪元素::v-deep包裹一下类名就可以了,举例:
::v-deep(.n-form-item-feedback-wrapper) {
--n-feedback-height: 10px;
}
原因
在 Vue.js 应用中,当使用 scoped CSS 时,通常样式只应用于当前组件,不会影响到子组件。但当需要穿透 scoped 属性,对子组件的样式进行修改,比如说使用框架的时候,想修改别人默认自带的样式。::v-deep
伪元素就派上了用场。
::v-deep
伪元素是一个Vue特定的伪元素,用于深度选择器,允许在当前组件的 scoped CSS 中影响子组件的样式。想要调整第三方组件库(如 NutUI、Element UI 等)中的样式,使用这个伪元素可以达到目的