weex本身自带了很多vue中没有的组件,例如<text>等。
这些组件,也有规定好的样式,所以理论上其样式的设置方式与常规的html元素没有区别。例如:
<div id="theDiv"> <text id="theText" style="color: white;">simple</text> </div>
上面将<text>的文本颜色设置为白色。
然而,实际上weex这些组件是用各种html元素组合而成的。所以这些组件实际渲染时会被还原为各种html元素。
这带来的一个问题就是,若使用间接筛选器为<text>的文本设置颜色:
<style scoped> #theDiv text{ color: white; } </style>
会发现<text>的颜色并没有改变。这是因为实际页面上根本没有<text>这个元素,<text>已经被还原成一堆<div>和<p>了。页面找不到<text>元素,于是间接筛选器也就不生效。
不过,由于知道<text>还原出的元素中,最关键的文本显示由<p>负责,所以:
<style scoped> #theDiv p{ color: white; } </style>
这样是生效的。但并不推荐使用这种方式。
正确的修改方式为:
1. 像上面的例子一样,直接在<text>元素中修改style属性。
2. 为<text>定义直接筛选器,例如上面的id="theText",然后在<style>中用直接筛选器设置。
<style scoped> #theText{ color: white; } </style>
3. 定义一个特定的class,<text>直接使用该class。