Issue
I work with Nuxt3 and I'm writing a simple card component. It has two have two color versions so I thought I would do the same thing I did for the header : write a primary and secondary class encapsulating the differences between V1 and V2 and applying it on the page where the component is used.
Problem: the base css is ok but the encapsulated classes never apply even though I see no difference with what I did for the header.
The component :
<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>
How the component is used in the page :
<tarification-card v-bind="card" class="primary" />
I can't wrap my head around this so any help would be welcomed !
Solution
You're not inherting the attributes correctly from the component usage definition to the correct HTML element in the component. The class being passed in the component usage definition, "primary", is being applied to the first "div" in the component definition but your CSS is written so that "primary" is applied to a wrapper "div" around "card-container". Here's a working example: VueJS Playground
Answered By - recoilnetworks
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.