如何通过Props为组件应用多个内联样式？

嘿，我一眼就发现你的问题所在了！你在子组件的style属性里用了逗号操作符，这直接导致只有父组件传递的props.size生效，子组件自己的background: '#fff'被完全忽略了。

问题根源拆解 #

看你子组件里的这段代码：

<div style={({ background: '#fff' }, props.size)}>

这里的({ background: '#fff' }, props.size)是JavaScript的逗号表达式——它会依次执行每个表达式，但最终只返回最后一个表达式的结果。也就是说，这个写法等价于style={props.size}，所以背景样式根本没被应用到div上，只有flex:1生效就不奇怪了。

两种正确的样式合并方式 #

要同时应用本地样式和父组件传递的样式，我们需要把两个对象合并成一个，React里常用这两种方法：

1. 对象展开运算符（推荐写法） #

用ES6的对象展开运算符...把两个样式对象合并，代码简洁易懂，而且如果父组件传递的样式和子组件本地样式有重复属性，父组件的会覆盖子组件的（符合你“父传递部分样式，子保留本地样式”的需求）：

const CardSettings = (props) => {
  return (
    <div style={{ background: '#fff', ...props.size }}>
      <h2 style={styles.headline}>{props.headline}</h2>
      {props.children}
    </div>
  )
}

2. Object.assign方法（兼容旧环境） #

如果你的项目还需要兼容不支持ES6展开运算符的环境，可以用Object.assign来合并对象，注意第一个参数要传空对象，避免修改原有的props.size：

const CardSettings = (props) => {
  return (
    <div style={Object.assign({}, { background: '#fff' }, props.size)}>
      <h2 style={styles.headline}>{props.headline}</h2>
      {props.children}
    </div>
  )
}

额外优化建议 #

• 建议把父组件传递的样式prop改名为style而不是size，语义更清晰，子组件里直接写...props.style就行，避免后续维护时混淆。
• 如果想让子组件的本地样式优先级更高（比如即使父组件传了background也不能覆盖你的白色背景），可以把本地样式放在展开运算符后面：

  <div style={{ ...props.size, background: '#fff' }}>
  

内容的提问来源于stack exchange，提问作者Limpuls