Nuxt3中封装CSS类无法生效问题求助

问题背景 #

使用Nuxt3开发卡片组件，需实现两种配色版本，参考头部组件的做法编写了primary和secondary类封装样式差异，在页面中给组件添加类后，基础CSS样式正常生效，但封装类的样式完全不生效，未发现与头部组件实现方式的差异。

组件代码：

<template>
  <div class="card-container">
    <div class="title-container">
      <h3>{{ title }}</h3>
      <p class="card-subtitle">{{ subtitle }}</p>
      <nuxt-link :to="link.link" class="btn">
        {{ link.title }}
      </nuxt-link>
    </div>
    <div class="list-container">
      <p>{{ listTitle }}</p>
      <ul>
        <li v-for="(point, index) in bulletPoints" :key="index">
          <img src="~/assets/miniCheck.svg" alt="" />
          {{ point }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

type Link = {
  title: string;
  link: string;
};

interface Props {
  link: Link;
  title: string;
  subtitle: string;
  listTitle: string;
  bulletPoints: string[];
}

defineProps<Props>()
</script>

<style scoped lang="scss">
@import 'assets/style/_variables.scss';

.card-container {
  width:18%;
  min-width: 290px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  .title-container {
    text-align: center;
    h3 {
      font-size: 2rem;
    }
    .card-subtitle {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 2rem;
    }
    a {
      font-size: 1.2rem;
      border-radius: 8px;
      padding: 0.4rem 1.5rem;
    }
  }
  .list-container {
    margin: 4rem 0;
    p {
      font-weight: bold;
      margin-bottom: 1rem;
    }
  }
}
.primary {
  .card-container {
    border: 1px solid $blue;
    .title-container {
      h3 {
        color: $blue;
      }
      .card-subtitle {
        color: $green;
      }
      a {
        color: $blue;
        border: 1px solid $blue;
      }
    }
    .list-container {
      p {
        color: $green;
      }
    }
  }
}
</style>

页面使用方式：

<tarification-card v-bind="card" class="primary" />

解决思路 #

1. 问题根源 #

Scoped样式会给组件内部DOM元素添加唯一属性，仅作用于组件内部元素。你给组件标签添加的primary类属于组件外部的父级元素，组件内的scoped样式无法匹配到这个外部类选择器，导致样式不生效。

2. 两种可行解决方案 #

方案一：通过Props传递样式类到内部根元素

修改组件，添加props接收外部样式类，绑定到组件内部的根容器：

组件修改代码：

<template>
  <!-- 将外部传入的类绑定到根容器 -->
  <div class="card-container" :class="cardClass">
    <!-- 原有内容保持不变 -->
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

type Link = {
  title: string;
  link: string;
};

interface Props {
  link: Link;
  title: string;
  subtitle: string;
  listTitle: string;
  bulletPoints: string[];
  // 添加接收样式类的可选Props
  cardClass?: string;
}

defineProps<Props>()
</script>

页面使用修改：

<tarification-card v-bind="card" card-class="primary" />

方案二：使用:deep()穿透Scoped样式

无需修改组件逻辑，在scoped样式中用:deep()匹配外部类：

修改组件的style部分：

<style scoped lang="scss">
@import 'assets/style/_variables.scss';

// 原有基础样式不变

// 用:deep()穿透scoped，匹配外部的.primary类
:deep(.primary) {
  .card-container {
    border: 1px solid $blue;
    .title-container {
      h3 {
        color: $blue;
      }
      .card-subtitle {
        color: $green;
      }
      a {
        color: $blue;
        border: 1px solid $blue;
      }
    }
    .list-container {
      p {
        color: $green;
      }
    }
  }
}
</style>

3. 头部组件生效原因排查 #

之前的头部组件能生效，大概率是以下两种情况之一：

• 头部组件将外部传入的类绑定到了内部根元素
• 头部组件的样式未使用scoped，或通过:deep()做了样式穿透

内容的提问来源于stack exchange，提问作者ApocalypticLardon