Typescript React - 类型“字符串”不可分配给类型“外观”

Question

I'm trying to create some UI utility components with React Typescript. These utilities are meant to provide some default styling to HTML elements.

FullScreen is just a div whose height is 100vh and whose width is 100vw .

So FullSreenProps extends HTMLDivElement . But when I spread props.style into the style property, I get a type error:

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)

Here's the FullScreen component:

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

What's the correct way to pass props.style while also specificying height: 100vh and width: 100vw in the style prop?

Answer 1

You can try the following:

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