今天在做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>