uniapp中<text>的样式无法更改

本文讨论了在CSS布局中遇到的问题,即在Web开发中文本样式会继承父元素,而在uni-app和UVue中,样式不继承。作者提供了在uni-app中避免样式冲突的方法,强调了组件化开发中样式隔离的重要性。
摘要由CSDN通过智能技术生成

今天在做css布局方面的东西,发现<text>在css里怎么都改不了样式,搜索了一下:

样式不继承的概念

样式不继承

web的样式继承,主要是文字样式继承。web的css属性众多,规范比较松散,随便一个div都可以写文字相关的样式。这样其实不严谨、性能也不好。

在原生等严谨的应用开发方案中,均是组件搭配该组件的专有属性。容器组件和文本组件分离,属性各自隔离,不可能在容器组件里写文本组件的样式。

在uni-app x中也是,文本必须使用<text>组件,<view>组件就是容器组件,它的style里不应用使用与文本修饰相关的样式,比如文字颜色、大小等。

如下代码,在web浏览器渲染时,父view的style会影响子text,所以123是红色。

但是在uvue中,样式不继承,123的颜色仍然是默认颜色黑色。

解决方法:text里面直接改样式,不要在style里面改

例子如下:

<template>
    <view>
        <text style="color:red">123</text>
    </view>
</template>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值