'string' 유형은 'inherit' | 'initial' | 'unset' | 'fixed' | 'absolute' | 'static' | 'relative' | 'sticky'에 할당할 수 없습니다.

'string' 유형은 'inherit' | 'initial' | 'unset' | 'fixed' | 'absolute' | 'static' | 'relative' | 'sticky'에 할당할 수 없습니다.

응용 프로그램에서 다음 오류가 발생합니다(npm 5.4.2, react 15.4, typescript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).

이 조작은 유효합니다.

<div style={{position: 'absolute'}}>working</div>

컴파일되지 않음:

const mystyle = {
    position: 'absolute'            
} 

<div style={mystyle}>not working</div>

컴파일 오류:

ERROR in ./src/components/Resource.tsx
(61,18): error TS2322: Type '{ style: { position: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ style: { position: string; }; children: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type '{ position: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'position' are incompatible.
          Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'.
webpack: Failed to compile.

하지만 뭐가 다를까?다음 방법으로 해결할 수 있습니다.

const mystyle = {
    position: 'absolute' as 'absolute'            
} 

하지만 이것이 좋은 해결책일까요?

다른 스타일/CSS 속성에는 문제가 없습니다.

github: https://github.com/Microsoft/TypeScript/issues/11465에서도 비슷한 문제를 발견했지만 제대로 이해했다면 ealier 버전의 typescript 버그였습니다.

아무쪼록 잘 부탁드립니다.

이것은 회피책이지만 괜찮습니다.기타 솔루션은 다음과 같습니다.

const mystyles = {
   position: 'absolute',
} as React.CSSProperties;

이 문제가 언제 해결될지 다시 확인해 보세요.이정표로 판단했을 때 TS 2.6 정도.

React를 사용합니다.CSSProperties 유형:

import React, { CSSProperties } from "react";

const myStyles: CSSProperties = {
  position: 'absolute',
}

그런 다음 평소처럼 스타일을 사용합니다.

<div style={myStyles} />

중첩된 스타일 객체가 있는 경우 슈퍼리머리의 답변이 작동하지 않습니다.이 경우 유형을 생성할 수 있습니다.

import React, { CSSProperties } from 'react';

export interface StylesDictionary{
    [Key: string]: CSSProperties;
}

이렇게 사용합니다.

const styles:StylesDictionary  = {
    someStyle:{
        display:'flex',
        justifyContent:'center',  
    },
    someOtherStyle:{
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        
    }
}

그 후:

<div style={styles.someStyle} />

TypeScript는 const assertion을 사용하여 개체 전체의 리터럴 값을 추론할 수 있습니다.

const mystyle = {
    position: 'absolute'            
} as const;

이렇게 하면 속성을 추가할 수 있습니다.mystyle, 그것은 그들에게도 효과가 있을 것이다.

포장지를 물려주려다 비슷한 문제가 생겼다.HeroImage 컴포넌트에 대한 높이 문자열 값(100px, 10vw, 100vh 등).해결책은 CSS 오브젝트 내의 값(mouthful)에 대해 문자열 리터럴을 실제로 사용하는 것이었습니다.

interface HeroImageProps {
  src: StaticImageData,
  alt: string,
  wrapperHeight: string,
}

export default function HeroImage({ src, alt, wrapperHeight }: HeroImageProps) {

  const wrapperStyles: React.CSSProperties = {
    height: `${wrapperHeight}`
  }

  return (
    <div className={styles.heroImage} style={wrapperStyles} >
      <Image
        src={src}
        alt={alt}
        layout="fill"
        priority
      />
    </div>
  )
}

언급URL : https://stackoverflow.com/questions/46710747/type-string-is-not-assignable-to-type-inherit-initial-unset-fixe