React TSX组件用数组传style报CSSProperties类型不兼容错误如何解决

• React Web 框架原生的 style 属性仅支持传入 单个CSS样式对象，数组形式传入多样式是React Native独有的语法，并不适配Web场景。
• 你的代码中传入的 [CONTAINER, style] 是 CSSProperties[] 数组类型，和 style 属性预期的单CSSProperties类型不匹配，因此TypeScript抛出类型校验错误。

方案1：对象展开合并（最简便） #

直接通过对象展开语法合并多个样式，额外处理可选style可能为undefined的边界情况即可，修改报错行代码如下：

<div style={{...CONTAINER, ...(style ?? {})}}>

方案2：封装样式合并工具函数 #

如果需要频繁合并多组样式，可以封装通用工具函数复用逻辑：

import type { CSSProperties } from "react";

function mergeStyles(...styles: (CSSProperties | undefined)[]): CSSProperties {
  // 过滤空值后合并所有样式对象
  return Object.assign({}, ...styles.filter(Boolean));
}

使用时直接传入多组样式即可：

<div style={mergeStyles(CONTAINER, style)}>

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