Vue 3 +Ant Design Vue 父容器样式不影响子级，隔离-CSDN博客

公共样式文件 common.scss

.zz-ant-status-bar {
  div {
    font-size: 12px;
    padding: 0 8px;
  }
}

页面代码

  <div class="zz-ant-status-bar">
    <a-row>

      <a-col :span="6" >
            <a-progress :percent="progress.percent" size="small" />
      </a-col>
     
    </a-row>
  </div>

问题：外层 "zz-ant-status-bar" 自定义样式对 Ant Design Vue 的控件 <a-progress 渲染产生了影响，现在想以不改动公用代码 common.scss 的情况下，以最小的改动解决对 <a-progress 渲染样式的影响。

在【页面代码】中添加自定义样式 "progress-col"

.progress-col div {
  all: revert;
}

把这个 "progress-col" 样式添加在 <a-progress 外层的 <a-col 上，

<a-col :span="6" class="progress-col">

  <div class="zz-ant-status-bar">
    <a-row>

      <a-col :span="6" class="progress-col">
            <a-progress :percent="progress.percent" size="small" />
      </a-col>
     
    </a-row>
  </div>

以下是 ai 的解释

你这样修改有效的核心原理是通过 all: revert 重置了 a-progress 内部 div 元素继承的样式，具体可以拆解为以下几点：

定位受影响的范围
你给 a-progress 所在的 a-col 添加了 progress-col 类，这个类作为 “隔离容器”，精准定位了需要修复样式的区域（即 a-progress 所在的列）。
利用 all: revert 重置样式
CSS 属性 all: revert 的作用是：将元素的所有 CSS 属性重置为其 “自然值”—— 即浏览器默认样式（或父级未被覆盖的原始样式），而不是继承当前上下文的样式。
在你的代码中，.zz-ant-status-bar 对内部所有 div 设置了 font-size: 12px; padding: 0 8px;，这会影响 a-progress 内部的 div 元素（因为 a-progress 组件内部通常由多个 div 构成，用于渲染进度条、文字等）。
而 .progress-col div { all: revert; } 则指定：progress-col 类内部的所有 div（包括 a-progress 组件内部的 div），不再继承 .zz-ant-status-bar div 的样式，而是恢复为浏览器默认样式或 a-progress 组件本身的原始样式，从而摆脱了父级样式的干扰。
优先级与作用范围的控制
由于 .progress-col 是 a-col 的类，比 .zz-ant-status-bar 更靠近 a-progress 内部的 div，因此 .progress-col div 的样式规则优先级更高，能够覆盖 .zz-ant-status-bar div 的样式，确保重置生效。

简单说，你通过 progress-col 划定了需要隔离的区域，再用 all: revert 一键清除了该区域内 div 元素从父级继承的样式，让 a-progress 组件恢复了自己原本的样式，达到了 “不受 zz-ant-status-bar 影响” 的效果。这种方式比全局重置更精准，只针对目标区域生效，避免影响其他元素。