uni-app 子组件中使用css设置uni-icons图标样式不生效

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 子组件中使用css设置uni-icons图标样式不生效

示例代码：

<template>  
    <view class="test">  
        <uni-icons type="close"  class="close"></uni-icons>  
    </view>  
</template>  

<style lang="scss" scoped>
.test{
    position: relative;
    .close{
        position: absolute;
        bottom: 100rpx;
        left: 50%;
        transform: translateX(-50%);
        :deep(.uni-icons){
            font-size: 48rpx!important;
            color: #FFF!important;
        }
    }
}
</style>

操作步骤：

  • 将示例代码作为子组件引入某个页面

预期结果：

  • 将示例代码作为子组件引入某个页面，.uni-icons的样式可以像在页面中一样正常生效

实际结果：

  • .uni-icons的样式不生效

bug描述：

为了保证uni-icons图标在不同设备中大小自适应，所以需要使用rpx单位来设置font-size，但是在子组件的style标签中使用css设置uni-icons的样式不生效，而如果直接在页面级别（也就是pages下的页面）这样写则可以生效。


Harmonyos Next教程
2 回复

在微信小程序上的组件中，设置 class，需要把组件设置成为虚拟节点，也就是在组件中添加

<script> export default { options: { virtualHost: true } } </script>

并且在 manifest 中的 mpweixin 中添加 mergeVirtualHostAttributes
详细文档：https://uniapp.dcloud.net.cn/tutorial/vue-api.html#其他配置


在uni-app中，如果你发现子组件中使用CSS设置uni-icons图标样式不生效，这通常是由于CSS的作用域和优先级问题导致的。uni-app 使用了 Vue.js 的组件系统，每个组件的样式默认是作用域限定的，即样式只会应用到当前组件的DOM上。要解决这个问题，你可以尝试以下几种方法：

方法一：使用深度选择器（::v-deep）

Vue 3 引入了 ::v-deep 选择器，用于穿透组件的作用域边界，应用样式到子组件的深层DOM中。

<template>
  <view>
    <uni-icons name="your-icon-name" class="custom-icon"></uni-icons>
  </view>
</template>

<style scoped>
::v-deep .uni-icons {
  color: red; /* 示例样式 */
  font-size: 24px; /* 示例样式 */
}

/* 或者直接针对class名 */
::v-deep .custom-icon {
  color: blue; /* 示例样式 */
  transform: rotate(45deg); /* 示例样式 */
}
</style>

方法二：全局样式

如果样式需要在多个组件中共享，可以考虑将样式定义在全局样式文件中。

在 App.vue 或其他全局样式文件中添加：

.global-icon {
  color: green; /* 示例样式 */
  font-size: 32px; /* 示例样式 */
}

然后在子组件中：

<template>
  <view>
    <uni-icons name="your-icon-name" class="global-icon"></uni-icons>
  </view>
</template>

方法三：使用 !important 提高优先级

如果样式被其他规则覆盖，可以尝试使用 !important 提高优先级：

<template>
  <view>
    <uni-icons name="your-icon-name" class="important-icon"></uni-icons>
  </view>
</template>

<style scoped>
.important-icon {
  color: purple !important; /* 使用 !important 提高优先级 */
  font-size: 28px !important; /* 使用 !important 提高优先级 */
}
</style>

注意事项

  • 确保你的 uni-icons 组件正确引入并使用。
  • 检查是否有其他样式规则覆盖了你的设置。
  • 使用 scoped 样式时，Vue 会自动为你的选择器添加一个属性选择器，以限制样式的作用范围。

通过以上方法，你应该能够解决在uni-app子组件中设置uni-icons图标样式不生效的问题。

回到顶部