封装css类不适用[nuxt3]

Question

我使用 Nuxt3，正在编写一个简单的卡片组件。它有两个有两种颜色的版本，所以我想我会对标题做同样的事情：编写一个主要和次要类来封装 V1 和 V2 之间的差异，并将其应用到使用该组件的页面上。

问题：基本 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" />

我无法解决这个问题，所以欢迎任何帮助！

Answer 1

您没有将属性从组件使用定义正确继承到组件中正确的 HTML 元素。在组件使用定义中传递的类“primary”被应用于组件定义中的第一个“div”，但编写的 CSS 使得“primary”应用于“card-container”周围的包装器“div” ”。这是一个工作示例：VueJS Playground