如何在顺风中禁用继承？
如何在顺风中禁用继承？
提问于 2021-08-26 18:28:12
我在Nuxtjs和我的组件中使用tailwind-css来设置组件的样式。
这是我的风格类
.ccard {
@apply bg-white px-2 py-10;
&-header {
@apply relative;
&-btn {
@apply btn btn-circle btn-sm btn-primary px-0 border-0;
}
&-img {
// width: 100%;
// height: 100%;
@apply object-cover w-full;
}
}
&-detail {
@apply text-center pt-2 px-1;
&-cat {
@apply text-sm text-gray-400 mb-2;
}
&-title {
@apply text-lg font-semibold;
}
}
}这是我的组件模板
<template>
<div class="ccard">
<div class="ccard-header">
<button class="ccard-header-btn">
<magnify />
</button>
<img :src="data.src" class="ccard-header-img" alt="" />
</div>
<div class="ccard-detail">
<div class="ccard-detail-cat">{{ data.cat }}</div>
<div class="ccard-detail-title">{{ data.title }}</div>
</div>
</div>
</template>这就是结果
我希望按钮是一个圆圈，但它不是！我得到了检查，它从一些我不知道它在哪里的地方继承了一个最小的高度。我认为在顺风中，子标签继承了它们的父标签类，我认为这是不好的。
如何在顺风-css中禁用遗传
回答 1
Stack Overflow用户
发布于 2021-08-26 19:10:12
我认为‘顺风css’中的继承不是你的问题。对于这个问题，我有两个答案：
1)您必须检查以放大btn内部，可能它有一个小的x边距或x填充
2)你必须在图标中设置特定的宽度和高度(w-10 h-10)类。
看看这段代码：
<button class="bg-green-400 rounded-full">
<img class="w-10 h-10 p-2" src="https://img.icons8.com/ios-glyphs/30/000000/search--v1.png"/>
</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68943694
复制相关文章
相似问题
腾讯云开发者
