TypeScript css 타입 지정해주기

 

 

 

JavaScript로 코딩을 할 땐 문제 없던 코드들이 TypeScript로 하면 에러가 발생되는 경우가 많다.

생각지도 못한 타입 지정에 css 타입 지정이 있어 기록한다!

 

대부분 오류가 없는데, 인라인 스타일로 지정하게 되면 빨간 줄이 생기게 된다.

 

 

<div style={{backgroundPosition: "`${animation}`px"}}>테스트<div/>

 

 

위와 같이 작성하게 될 경우, 에러는 아니나 빨간 줄이 계~속 떠 있기 때문에 변경해주어야 한다.

스타일 컴포넌트를 사용하는데 위 코드처럼, 함수로 만든 내용을 넣어주어야 할 땐 스타일 컴포넌트가 작동하지 않는 경우가 있어서 유용하게 사용할 수 있었다.

 

 

const styles = {
  offsetStyle: {
    backgroundPosition: `${offset.x}px`,
  } as React.CSSProperties,
};

 

 

<div style={styles.offsetStyle}>
테스트
</div>

 

 

🔹 위 모양처럼 선언해주고 인라인 스타일 내에 넣어주면 된다!