reactjs - Kiểu cho thuộc tính style được truyền vào hàm

Vui lòng xem xét hàm TypeScript này

 function button(style: any, func: ()=>void, img: string) {
    return (
      <button
        className="Reader_Button"
        style={style}
        onClick={func}
      >
        <img src={img} alt="" />
        Back
      </button>
    );
  }

Kiểu đúng cho đối số đầu tiên style là gì? Tôi cảm thấy nó nên là một thứ gì đó như HTMLElementStyle nhưng tôi không thể tìm thấy cách viết đúng.

Xin lỗi, tôi đã không giải thích rõ ràng. Tôi muốn biết loại nào nên sử dụng để thay thế "any" trong style: any. Các định nghĩa TypeScript sẽ kiểm tra các loại của các thành phần được cung cấp trong đối tượng.

Tôi đang nói về định nghĩa của hàm, không phải ứng dụng.

Câu trả lời #1

Kiểu là React.CSSProperties. Bạn có thể tìm thấy điều này trong VSCode bằng cách viết <div style={{}}> và nhấn F12 khi con trỏ của bạn đang ở trong thuộc tính style.

Câu trả lời #2

Thuộc tính style trên các phần tử DOM thông thường nên ở dạng một đối tượng, trong đó các khóa là các thuộc tính CSS.

Ví dụ: <div style={{ width: "100%", backgroundColor: "black" }} />

Lưu ý rằng trong trường hợp các thuộc tính chứa dấu gạch nối, chúng sẽ trở thành kiểu camel case. Ví dụ background-color sẽ trở thành backgroundColor.

Tài liệu phong cách React