ReactJS应用多种内联样式

Question

假设我有以下样式：

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

我想将它们都应用到反应组件中吗？

Answer 1

虽然我为此做了一些研究，但答案并非明确，一个建议是：

<View style={Object.assign({}, styles.padding, styles.margin)}>
    ...
</View>

Object.assign（）获取参数列表并合并它们，但是，如果你没有传递第一个空对象，它将覆盖第一个参数，所以如果你想让你的样式保持干净，你必须传递它

然而，作为反应0.27.2，我在尝试这样做时遇到了一个错误的错误。

进一步阅读透露：

<View style={StyleSheet.flatten([styles.postHeader, styles.flowRight])}>
  ...
</View>

工作得很好，但是在我找到另一个片段之后，这非常冗长且不太直观：

<View style={[styles.postHeader, styles.flowRight]}>

出于所有意图和目的，这正是我所寻找的。

我只是想在这里分享这些知识，因为它看起来相当明显，但我找不到任何文档。

Answer 2

最简单的解决方案，我在嵌入式CSS中使用它

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

或通过将类添加为

来使用

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