타입스크립트로 styled-component 사용하기

import React from 'react';
import styled, { css } from 'styled-components';

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${props => props.color || 'black'};
  border-radius: 50%;
  ${props =>
    props.huge &&
    css`
      width: 10rem;
      height: 10rem;
    `}
`;

function App() {
  return <Circle color="red" huge />;
}

export default App;

문서를 참조하여
npm install @types/styled-components 설치 후,

 

import {} from "styled-components/cssprop"를 하려했으나 여전히 되지 않음.

 

스택오버플로우를 참조해서 import * as types from "styled-components/cssprop"으로 수정

 

import React from "react";
import styled from "styled-components";
import * as types from "styled-components/cssprop";

const Circle = styled.div<{ huge: boolean }>`
  width: 5rem;
  height: 5rem;
  background: ${(props) => props.color || "black"};
  border-radius: 50%;
  ${(props) =>
    props.huge &&
    `
      width: 10rem;
      height: 10rem;
    `}
`;

function App() {
  return <Circle color="red" huge />;
}

export default App;

styled.div에 타입을 명시해줘야 한다!