原文链接： https://bobbyhadz.com/blog/react-pass-style-as-props-typescript [1]

作者： Borislav Hadzhiev [2]

正文从这开始~

React.CSSProperties

在React TypeScript中使用 React.CSSProperties 类型来作为props传递CSS样式。比如： style: React.CSSProperties; 。 CSSProperties 被用于类型声明 style 对象，其由CSS属性名称和值组成。

// App.tsx
import React from 'react';
type ButtonProps = {
  // 👇️ type as React.CSSProperties
  style: React.CSSProperties;
  children: React.ReactNode;
function Button({style, children}: ButtonProps) {
  return <button style={style}>{children}</button>;
const App = () => {
  return (
      <Button
        style={{padding: '2rem', fontSize: '3rem', backgroundColor: 'lime'}}
        Click
      </Button>
      <h2 style={{fontSize: '3rem'}}>Hello world</h2>
export default App;

上述示例，我们把 style 对象类型声明为 React.CSSProperties 。

当给 Button 组件传递样式时，会自动补全属性名称。

你可以通过使用你的IDE，来弄清楚特定prop所期望的类型是什么。

style-prop-cssproperties.gif

在大多数IDE中，你可以将鼠标悬停在prop上，看到prop的值。style prop的定义显示，它的类型是 CSSProperties 或 undefined 。

HTML元素扩展

你可能还需要在一个组件的props中扩展一个HTML元素。

// App.tsx
// 👇️ extend button props
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  style: React.CSSProperties;
  children: React.ReactNode;
function Button({style, children}: ButtonProps) {
  return <button style={style}>{children}</button>;
const App = () => {
  return (
      <Button
        style={{padding: '2rem', fontSize: '3rem', backgroundColor: 'lime'}}
        Click
      </Button>
      <h2 style={{fontSize: '3rem'}}>Hello world</h2>