ReactJS应用多个内联样式

14

假设我有以下样式:

const styles = StyleSheet.create({
padding: {
  padding: 10
},
margin: {
  margin: 10
}
});

我想将它们同时应用于一个React组件,该怎么办?


我不明白你想做什么或者你不知道如何去做。 - Moti Azu
2个回答

37

虽然我做了一些研究,但答案并不明显,有一个建议:

<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]}>

就所有意图和目的而言,这正是我所寻求的。

我想在这里分享这个知识,因为它似乎相当明显,但我找不到任何相关文档。


截至2020年11月最新的React Web版本中,你给出的第一个解决方案对我非常有效。太棒了! - Pere

3

我最常使用的解决方法是在内联CSS中使用它

 <div style={{color: "yellow", fontSize: 24}}>Style Me</div>

或者添加类来使用

 <div className="section-spac banner-with-whitebg">Style Me</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接