如何在TypeScript中用PropTypes声明React.CSSProperties类型？

可以实现，你需要结合自定义PropTypes校验器和TypeScript类型定义，同时满足运行时校验和IDE类型提示需求，不用再手动转换类型。

解决方案思路 #

PropTypes本身没有内置React.CSSProperties的校验规则，所以需要：

1. 自定义一个运行时校验器，确保传入的style符合React样式属性的格式（对象或对象数组）
2. 通过TypeScript类型合并，让Props类型中的style对应React.CSSProperties，从而获得完整的属性提示

实现代码 #

组件定义（MyButton.tsx） #

import React from 'react';
import PropTypes, { InferProps } from "prop-types";

// 自定义运行时校验函数：检查style是否为合法的CSS对象/数组
const cssPropertiesPropType = (props: any, propName: string, componentName: string) => {
  const style = props[propName];
  if (style == null) return null; // 允许不传style，按需调整为isRequired
  
  if (Array.isArray(style)) {
    for (const item of style) {
      if (typeof item !== 'object' || item === null) {
        return new Error(`组件\`${componentName}\`的\`${propName}\`属性无效：数组中的每个元素必须是对象`);
      }
    }
  } else if (typeof style !== 'object' || style === null) {
    return new Error(`组件\`${componentName}\`的\`${propName}\`属性无效：必须是对象或对象数组`);
  }
  return null;
};

// 定义PropTypes规则
const propTypes = {
  text: PropTypes.string.isRequired,
  style: cssPropertiesPropType,
};

// 合并类型：用React.CSSProperties替换InferProps推断出的style类型
type Props = Omit<InferProps<typeof propTypes>, 'style'> & {
  style?: React.CSSProperties | React.CSSProperties[];
};

const MyButton = ({ text, style }: Props) => {
  // 无需再手动转换类型
  return (
    <button style={style}>{text}</button>
  );
};

MyButton.propTypes = propTypes;

export default MyButton;

组件使用（App.tsx） #

import React from 'react';
import MyButton from './MyButton';

const App = () => {
  return (
    {/* 输入style对象时，IDE会自动提示width、color等所有CSS属性 */}
    <MyButton text="点击按钮" style={{ width: '100px', backgroundColor: '#eee', color: '#333' }} />
  );
};

export default App;

说明 #

• 自定义校验器负责运行时的合法性检查（开发环境会弹出警告）
• TypeScript类型合并确保静态检查和IDE提示正常工作
• 完全替代了原代码中style as React.CSSProperties的手动类型转换，同时保留PropTypes的校验能力

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