uniapp 如何修改uni-card组件样式

在uniapp中使用uni-card组件时，如何自定义它的样式？我尝试通过修改class和style的方式调整卡片的边框、阴影和间距，但效果不理想。请问有没有更有效的方法来覆盖默认样式？是否需要使用/deep/或>>>选择器？能否提供具体的代码示例？

2 回复

在uni-app中修改uni-card样式，可以通过以下方式：

  1. 使用/deep/深度选择器
/deep/ .uni-card {
  background: #f5f5f5;
  border-radius: 10px;
}

  1. 使用全局样式文件 在App.vue中定义全局样式

  2. 使用行内样式

<uni-card style="margin:10px"></uni-card>

推荐使用深度选择器，可覆盖组件默认样式。


在 UniApp 中修改 uni-card 组件的样式，可以通过以下方法实现。由于 uni-card 是内置组件，直接修改其样式需使用深度选择器或自定义样式类。

方法一：使用深度选择器（推荐）

在页面的 <style> 标签中，使用 ::v-deep 或 /deep/ 穿透样式，覆盖 uni-card 的默认样式。例如，修改卡片背景色和边距：

<template>
  <view>
    <uni-card title="示例卡片">内容区域</uni-card>
  </view>
</template>

<style scoped>
/* 通过深度选择器修改样式 */
::v-deep .uni-card {
  background-color: #f0f8ff; /* 修改背景色 */
  margin: 10px; /* 调整边距 */
}
::v-deep .uni-card__header {
  padding: 15px; /* 调整标题区域内边距 */
}
</style>

方法二：自定义样式类

通过 uni-card 的 class 或 style 属性直接传入自定义样式：

<template>
  <view>
    <uni-card class="custom-card" title="自定义卡片">内容</uni-card>
  </view>
</template>

<style scoped>
.custom-card {
  border-radius: 20px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 阴影 */
}
</style>

注意事项：

  1. 深度选择器兼容性：
    • 使用 ::v-deep（Vue 3 推荐）或 /deep/（Vue 2），确保样式穿透生效。
  2. 样式优先级：
    • 自定义样式需确保优先级高于默认样式（如提高特异性或使用 !important）。
  3. H5 平台差异：
    • 部分平台（如 H5）可能需要检查元素实际类名，因编译后类名可能变化。

通过以上方法，可灵活调整 uni-card 的边框、背景、间距等样式，满足个性化需求。

回到顶部