如何使用 PropType 声明类型？

Question

我想为我的组件声明一个 React.CssProperties 道具，但使用 PropTypes。到目前为止，我可以让它与

PropTypes.object

一起工作。但是当我使用该组件时，我无法获得 css 属性类型提示（例如宽度、颜色等样式）。此外，在将道具分配给元素时，我必须手动将其转换为 React.CssProperties。

有没有办法在 Typescript 中使用 PropeTypes 声明像 React.CssProperties 这样的类型？

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

const propTypes = {
  text: PropTypes.string,  
  style: PropTypes.object,
};
type Props = InferProps<typeof propTypes>;

const MyButton = ({text, style}:  Props) => {
  return (
    <button style={style as React.CSSProperties} />
  )
})

import React from 'react';
const App = () => {
  return (
    <MyButton style={{width: '100px'}}>{text}</button> // no type hint in IDE when typing width, color..etc
  )
}
export App

Answer 1

这里是优化代码：

import { CSSProperties, FC } from 'react';

interface MyButtonProps {
  text: string;
  style?: CSSProperties;
}

const MyButton: FC<MyButtonProps> = ({ text, style }) => {
  return (
    <button style={style}>{text}</button>
  );
};

export default MyButton;

结果如下：

Answer 2

你不需要从 propTypes 导入 propTypes。只需使用类型

import React from 'react';


type PropTypes = {
  text: string,  
  style: any,
};

const MyButton = ({text, style}:  Props) => {
  return (
    <button style={style as React.CSSProperties} />
  )
})

希望对你有帮助