【报Bug】子组件中使用css设置uni-icons图标样式不生效

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows 11 22631.4460

HBuilderX类型：正式

HBuilderX版本号： 4.29

第三方开发者工具版本号： 1.06.2409140

基础库版本号： 3.6.5

项目创建方式： HBuilderX

示例代码：

<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下的页面）这样写则可以生效。

2024-11-25 15:14 负责人:DCloud_UNI_yuhe 分享

1 个回复

DCloud_UNI_yuhe

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

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

并且在 manifest 中的 mpweixin 中添加 mergeVirtualHostAttributes

详细文档：https://uniapp.dcloud.net.cn/tutorial/vue-api.html#其他配置

要回复问题请先登录或注册

【报Bug】子组件中使用css设置uni-icons图标样式不生效

操作步骤：

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

预期结果：

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

实际结果：

.uni-icons的样式不生效

bug描述：

1 个回复

公告

相关问题

【报Bug】子组件中使用css设置uni-icons图标样式不生效

操作步骤： 将示例代码作为子组件引入某个页面

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

实际结果： .uni-icons的样式不生效

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

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

预期结果：

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

实际结果：

.uni-icons的样式不生效