React+TypeScript中如何向style属性传递样式对象数组？

React的style属性在JavaScript中支持传入样式数组自动合并，但TypeScript的类型定义不允许这种写法——它期望接收单个CSSProperties对象而非数组。以下是几种保留「顺序优先级（后定义样式覆盖前序）」特性的可行方案：

方法1：使用对象展开运算符手动合并 #

直接通过ES6对象展开语法合并多个样式对象，顺序靠后的对象会覆盖前面的同名属性，完全匹配你的需求：

import React from 'react';

const customStyle = {
  fontWeight: 'bold' as const,
};

const App = () => {
  return (
    <p style={{ ...{ fontStyle: 'italic' }, ...customStyle }}>
      Some Text....
    </p>
  );
};

方法2：封装类型安全的样式合并函数 #

如果需要频繁合并样式，可以封装一个通用函数，确保类型检查的同时简化调用：

import React, { CSSProperties } from 'react';

// 接收多个可选样式对象，按顺序合并后返回合法的CSSProperties
const mergeStyles = (...styles: (CSSProperties | undefined)[]): CSSProperties => {
  return Object.assign({}, ...styles);
};

const customStyle = {
  fontWeight: 'bold' as const,
};

const App = () => {
  return (
    <p style={mergeStyles({ fontStyle: 'italic' }, customStyle)}>
      Some Text....
    </p>
  );
};

方法3：类型断言（不推荐） #

如果只是临时快速绕过类型检查，可以用类型断言，但这种方式会丢失TypeScript的类型安全保障，不建议在生产代码中使用：

import React from 'react';

const customStyle = {
  fontWeight: 'bold' as const,
};

const App = () => {
  return (
    <p style={[{ fontStyle: 'italic' }, customStyle] as unknown as React.CSSProperties}>
      Some Text....
    </p>
  );
};

为什么数组写法在TS中报错？ #

React的TypeScript类型定义里，style属性的类型是CSSProperties | undefined，并不支持数组类型。JavaScript中React内部会自动合并数组中的样式对象，但TS的类型系统没有识别这个隐式行为，因此抛出类型不兼容的错误。

内容的提问来源于stack exchange，提问作者four-eyes