Typescript React - 類型“字符串”不可分配給類型“外觀”

Question

我正在嘗試使用 React Typescript 創建一些 UI 實用程序組件。 這些實用程序旨在為 HTML 元素提供一些默認樣式。

FullScreen只是一個高度為100vh且寬度為100vw的 div。

所以FullSreenProps擴展HTMLDivElement 。 但是當我將props.style傳播到 style 屬性中時，我得到一個類型錯誤：

Type '{ width: string; height: string; accentColor: string; alignContent: string; alignItems: string; alignSelf: string; alignmentBaseline: string; all: string; animation: string; animationDelay: string; ... 443 more ...; [Symbol.iterator](): IterableIterator<...>; }' is not assignable to type 'CSSProperties'.
  Types of property 'appearance' are incompatible.
    Type 'string' is not assignable to type 'Appearance'.ts(2322)

這是FullScreen組件：

import React, { useState, useEffect, useMemo } from 'react';


interface FullScreenProps extends HTMLDivElement{}

const FullScreen = (props: FullScreenProps): JSX.Element => {
    return (
      <div
      {...props}
      style={
          {
            ...props.style,
            width: "100vw", 
            height: "100vh",
          }
      }
      >
      </div>
    );
}
export default FullScreen

傳遞props.style的正確方法是什么，同時在style屬性中指定height: 100vh和width: 100vw ？

Answer 1

您可以嘗試以下方法：

import React from 'react';


interface FullScreenProps extends Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'> {}

const FullScreen = (props: FullScreenProps): JSX.Element => {
    return (
      <div
      {...props}
      style={
          {
            ...(props.style || {}),
            width: "100vw", 
            height: "100vh",
          }
      }
      >
      </div>
    );
}
export default FullScreen