嵌套可主题化组件：实现最近主题父级样式覆盖的优雅方案

你的核心痛点是：CSS选择器不考虑DOM嵌套深度，只看优先级和声明顺序，导致嵌套主题时最近的父主题无法覆盖祖辈的。我这里有一个纯Sass的解决方案，能自动生成递增优先级的主题选择器，让最近的主题样式自然胜出，而且完全不需要修改组件模板的结构。

核心思路 #

利用CSS选择器的优先级叠加规则：多个类选择器的组合比单个类选择器优先级更高。比如.theme-blue.theme-blue .ComponentBaz（两个类选择器+后代选择器）的优先级高于.theme-red .ComponentBaz（一个类选择器+后代选择器）。我们用Sass循环生成不同层级的主题选择器，让嵌套越深的主题，对应的选择器优先级越高。

具体实现 #

首先定义主题列表和最大嵌套深度（根据项目实际情况调整），然后用Sass的循环和mixin封装样式：

// 定义所有主题
$themes: red, blue;
// 最大支持的主题嵌套深度（10层足够应对绝大多数场景）
$max-nesting-depth: 10;

// 封装组件的主题样式，避免重复代码
@mixin component-theme-styles($theme) {
  // ComponentFoo的主题样式
  .ComponentFoo {
    background-color: $theme;
  }
  // ComponentBar的主题样式
  .ComponentBar {
    color: if($theme == blue, white, black); // 蓝色主题用白色文字，其他用黑色
  }
  // ComponentBaz的主题样式
  .ComponentBaz {
    border-color: $theme;
    color: $theme;
    background-color: white;
  }
}

// 遍历每个主题生成样式
@each $theme in $themes {
  $theme-class: '.theme-' + $theme;
  
  // 1. 处理组件自身直接添加主题类的情况（比如<div class="ComponentFoo theme-blue">）
  #{$theme-class} {
    @include component-theme-styles($theme);
  }

  // 2. 处理嵌套主题传递的情况，生成不同层级的选择器
  @for $i from 1 through $max-nesting-depth {
    // 生成重复i次的主题类选择器，比如i=2时是".theme-blue .theme-blue "
    $parent-theme-selectors: str-repeat($theme-class + ' ', $i);
    
    #{$parent-theme-selectors} {
      @include component-theme-styles($theme);
    }
  }
}

效果验证 #

拿你给出的嵌套场景测试：

<div class="ComponentFoo theme-red">
  <div class="ComponentBar theme-blue">
    <div class="ComponentBaz">
    </div>
  </div>
</div>

此时，.ComponentBaz会匹配到.theme-blue .theme-blue .ComponentBaz（2层主题选择器），它的优先级高于.theme-red .ComponentBaz（1层），所以蓝色主题样式会生效，完全符合你“最近主题父级覆盖祖辈”的期望。

方案优势 #

• 纯CSS/Sass实现：不需要修改组件模板，也不需要通过编程传递主题，保持组件的解耦性。
• 自动处理优先级：嵌套越深的主题，对应的选择器优先级自动越高，无需手动编写冗长的子组合器。
• 维护简单：新增主题或修改组件样式，只需要调整$themes列表或component-theme-stylesmixin即可，生成的CSS冗余由Sass自动处理。

内容的提问来源于stack exchange，提问作者Andrey Mikhaylov - lolmaus