ReactJS 应用多个内联样式

Question

假设我有以下风格：

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

我想将它们都应用到 React 组件？

Answer 1

虽然我为此做了一些研究，但答案不是很清楚，一个建议是：

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

无论出于何种意图和目的，这都是我一直在寻找的。

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

Answer 2

我在内联中使用的最简单的解决方案css

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

或通过添加类作为

使用

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

ReactJS apply multiple inline styles