【发布时间】：2022-01-13 19:45:28
【问题描述】：
我正在构建一个包含三个卡片组件的页面。三张牌中的一张（中间一张）的样式与其他两张不同，我无法做到这一点。这是我到目前为止所拥有的......
Card.svelte（下）
<script>
export let subLevel;
export let price;
export let users;
export let storage;
export let sendLimit;
import Button from "./Button.svelte";
</script>
<div class="card">
<h2>{subLevel}</h2>
<ul>
<li class="price"><span class="dollar">$</span>{price}</li>
<li class="spec">{storage} Storage</li>
<li class="spec">{users} Users Allowed</li>
<li class="spec">Send up to {sendLimit} GB</li>
</ul>
<Button>Learn more</Button>
</div>
<style>
.card {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding-top: 2rem;
background-color: #fff;
border-radius: 10px;
max-width: 350px;
color: var(--gray-blue);
padding-inline: 29px;
}
.dollar {
font-size: 2.5rem;
margin-right: 0.5rem;
}
.price {
display: flex;
font-size: 4.5rem;
align-items: center;
justify-content: center;
border-top: none;
color: var(--dark-gray-blue);
}
ul {
width: 100%;
list-style: none;
text-align: center;
}
li {
text-decoration: none;
border-top: 1px solid var(--gray-blue);
padding-block: 13px;
}
li:last-child {
border-bottom: 1px solid var(--gray-blue);
}
</style>
Button.svelte（下）
<button><slot /></button>
<style>
button {
text-transform: uppercase;
width: 100%;
background: linear-gradient(135deg, #a2a7f0, #696edd);
color: #fff;
font-size: 0.8125rem;
letter-spacing: 1.39px;
padding-block: 0.875rem;
border: none;
border-radius: 6px;
cursor: pointer;
margin-block: 2rem;
}
</style>
App.svelte（下）
<script>
import Card from "./components/Card.svelte";
import Footer from "./components/Footer.svelte";
// Card details
const basicMonthly = {
subLevel: "Basic",
price: 19.99,
storage: "500 GB",
users: 2,
sendLimit: 3,
};
const proMonthly = {
subLevel: "Professional",
price: 24.99,
storage: "1 TB",
users: 5,
sendLimit: 10,
};
const masterMonthly = {
subLevel: "Master",
price: 39.99,
storage: "2 TB",
users: 10,
sendLimit: 20,
};
</script>
<main class="site-content">
<Card {...basicMonthly} />
<Card {...proMonthly} />
<Card {...masterMonthly} />
</main>
<Footer />
<style>
</style>
我的问题是：如何为第二个 Card 组件添加独特的样式？它应该具有以下样式：
中间组件的样式（下）
<style>
.card {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding-top: 2rem;
background-color: linear-gradient(135deg, #a2a7f0, #696edd);
border-radius: 10px;
max-width: 350px;
color: #fff;
padding-inline: 29px;
}
.dollar {
font-size: 2.5rem;
margin-right: 0.5rem;
}
.price {
display: flex;
font-size: 4.5rem;
align-items: center;
justify-content: center;
border-top: none;
color: #fff;
}
ul {
width: 100%;
list-style: none;
text-align: center;
}
li {
text-decoration: none;
border-top: 1px solid #fff;
padding-block: 13px;
}
li:last-child {
border-bottom: 1px solid #fff;
}
</style>
... 和 Button.svelte 也必须在该中间组件上进行更改。它的样式应该如下：
<style>
button {
text-transform: uppercase;
width: 100%;
background: #fff;
color: #6d72de;
font-size: 0.8125rem;
letter-spacing: 1.39px;
padding-block: 0.875rem;
border: none;
border-radius: 6px;
cursor: pointer;
margin-block: 2rem;
}
</style>
我是 Svelte 的新手，完全被这个难住了。我尝试过使用$$restProps 和动态样式，但我似乎无法深入了解我需要的按钮和嵌套在卡片div 中的各种元素。
这可以通过 Svelte 实现吗，还是我应该简单地构建另一个组件来满足我的需要？当然还有另一种（更干燥的）方法可以做到这一点？非常感谢任何帮助！
【问题讨论】：