解决Naive UI的form表单的form-item自带的--n-feedback-height，在浏览器修改生效，本地改代码不生效问题。

问题

最近在学习用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 等）中的样式，使用这个伪元素可以达到目的