React Native Styling:如何设置“子元素”的样式?

时间:2020-01-11 02:08:17

标签: react-native

在Web CSS中,我们可以为 sub 元素设置CSS。示例:

<div class="test">
<p>abc</p>
</div>

我们可以通过以下方式设置<p> css:

.test p {
    font-size:20px;
}

现在在React Native中,我有这个:

<View style={myStyle.test}>
<Text>abc</Text>
</View>

如何通过<Text>设置myStyle.test样式?

3 个答案:

答案 0 :(得分:1)

实际上,您不能像css子代那样使用,必须为要使用的每个元素设置自定义样式。

答案 1 :(得分:0)

react native中的CSS只是Web CSS的一个子集,它不允许您在webCss中执行操作。您所拥有的只是内联CSS。因此,您必须分别设置样式。您可以通过定义一个通用样式对象并将其传递而不是重复来避免重复。

您也可以检出此库:

https://github.com/vitalets/react-native-extended-stylesheet

答案 2 :(得分:0)

根据文档

所有核心组件都接受一个名为style的道具。样式名称和值通常与CSS在网络上的工作方式匹配,但名称使用驼峰式大写字母(例如backgroundColor而不是background-color

react-native现在不支持级联,yo = u必须为要设置样式的每个元素提供样式支持。