假设我有以下样式:
const styles = StyleSheet.create({
padding: {
padding: 10
},
margin: {
margin: 10
}
});
我想将它们同时应用于一个React组件,该怎么办?
假设我有以下样式:
const styles = StyleSheet.create({
padding: {
padding: 10
},
margin: {
margin: 10
}
});
我想将它们同时应用于一个React组件,该怎么办?
虽然我做了一些研究,但答案并不明显,有一个建议:
<View style={Object.assign({}, styles.padding, styles.margin)}>
...
</View>
Object.assign()接受参数列表并将它们合并在一起,但是如果你没有传递第一个空对象,它将覆盖第一个参数,所以如果你想保持样式的整洁,你必须传递它。
然而,在react 0.27.2中,我尝试这样做时出现了分配错误。
进一步阅读揭示:
<View style={StyleSheet.flatten([styles.postHeader, styles.flowRight])}>
...
</View>
这个代码可以正常工作,但是很冗长而且不太直观,后来我找到了另一个代码片段:
<View style={[styles.postHeader, styles.flowRight]}>
就所有意图和目的而言,这正是我所寻求的。
我想在这里分享这个知识,因为它似乎相当明显,但我找不到任何相关文档。
我最常使用的解决方法是在内联CSS中使用它
<div style={{color: "yellow", fontSize: 24}}>Style Me</div>
或者添加类来使用
<div className="section-spac banner-with-whitebg">Style Me</div>