Vue2及Vue3强制修改组件库样式的方法以及Vue3强制修改组件库样式不生效的原因？解决方案有哪些？

1. Vue2强制修改组件库样式的方法

在<style scoped>内使用 >>> 或 /deep/ ，建议用/deep/ ，避免>>>无法解析的问题。

//方案一
<style scoped>
.zly_con >>> .el-dialog .el-dialog__body{
  padding: 10px;
}
</style>
 
// 方案二
<style scoped>
.zly_con /deep/ .el-dialog .el-dialog__body{
  padding: 10px;
}
</style>

2. Vue3强制修改组件库样式的方法

Vue2的方案同样适用，只不过官方文档中并未提及/deep/，而是推荐使用:deep()的方法

//强制修改arco-design组件库中menu组件的图标与文字间距以及对齐方式
<style lang="less" scoped>
    //方案一
    :deep(.arco-menu .arco-menu-pop-header .arco-menu-icon) {
      vertical-align: middle;
      margin-right: unset;
    }
    //方案二(全局修改，使用前要注意）
    :global(.arco-menu .arco-menu-pop-header .arco-menu-icon){
          vertical-align: middle;
          margin-right: unset;
       }
</style>

3. Vue3强制修改组件库样式不生效的原因？

 经过开发中的经验积累，不生效的原因有以下几点：

1）确认类名及类名的层级是否准确

2）强制修改的组件样式没在当前组件内

        比如：menu组件的二级菜单

        如图所示：

两个目录压根不在一个组件中，所以强制修改组件样式不生效。

解决方案：

 1）需要在组件上设置是否将 menu 的下拉列表插入至 body 元素

:teleported="false"

<arco-menu 
  mode="horizontal" 
  :selected-keys="navActiveCode"
  :teleported="false"
>
    ....
</arco-menu>

 如该组件不支持该api，可采用以下方法：

2）:global()方法

<style lang="less" scoped>
    :global(.arco-menu .arco-menu-pop-header .arco-menu-icon){
          vertical-align: middle;
          margin-right: unset;
       }
</style>