Styled Components & TypeScript

 

React에서 스타일을 지정하는 방법에는 여러 방법이 있지만  가장 많이 사랑받는 방법 중 하나가 바로 styled-components입니다. 그런데 Styled Components 라이브러리를 TypeScript로 전환하면서 같이 사용하기 위해서는 약간의 방법이 추가로 필요합니다. 

1. 유형 설치

Styled Components 라이브러리는 유형과 함께 제공되지 않습니다. 확실한 유형이 지정된 저장소에서 설치해야 합니다.

npm i --save-dev @types/styled-components

 

2. 스타일 작성하기

😊 단일 props 사용 시

CSS-in-JS 솔루션을 사용하는 주요 이점 중 하나는 사용자가 자신에게 필요한 값을 Props로 전달하고 그에 따라 CSS를 조정할 수 있다는 것입니다.

컴포넌트에 타입 지정할 때는 styled.div <인터페이스명>과 같이 사용합니다.

 

// styled-components에 1개 props 타입지정
// const Container = styled.div< {프롭스명 : 타입지정} >`
const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

 

Import한 컴포넌트에서도 JSX Elements에서와 마찬가지로 컴포넌트 뒤에 제네릭 유형을 전달할 수 있습니다. 

import Title from './Title';
const Heading = styled(Title)<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

 

😊 복수 props 사용 시 : interface 작성

인터페이스로 분리하여 타입을 지정하며 사용법은 같습니다.

// Container styled-components에 적용할 interfacer를 작성
interface Container extends 상속타입 {
  isActive: boolean;
  age: number;
  프롭스명: 타입지정;
}
// styled-components에 interface 타입 지정하기
const Container = styled.div<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

interface 상속받기

// 상속컴포넌트의 타입 상속받기
interface Container {
  isActive: boolean;
  age: number;
  프롭스명: 타입지정;
}

// 상속받은 컴포넌트에 타입 추가하기
const Container = styled(상속받을 컴포넌트명)<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

단일 props 타입 지정하기

• 상속 컴포넌트명을 콜백 함수(callback function)으로 전달
• 매개변수는 신규 타입:age과, 부모의 타입:parentProps을 전개 연산자(... parentProps)로 지정
• 신규 타입은 제네릭으로 기존과 동일하게 전달

// 기존 방식과 동일하게 사용
const Container = styled(상속받을 컴포넌트명)< { age : number } >`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;

// 위 방식에 문제가 있을경우 아래와 같이 사용.. 하나 복잡!
const Container = styled(({ age, ...parentProps }) => (
  <상속받을컴포넌트명 {...parentProps} />
))<{
  age: number;
}>`
  color: ${(props) => (props.active ? 'red' : 'blue')};
`;

3.Media templates

const customMediaQuery = (maxWidth: number) =>
  `@media (max-width: ${maxWidth}px)`;
const media = {
  custom: customMediaQuery,
  desktop: customMediaQuery(922),
  tablet: customMediaQuery(768),
  phone: customMediaQuery(576),
};
const Content = styled.div`
  height: 3em;
  width: 3em;
  background: papayawhip;
  /* Now we have our methods on media and can use them instead of raw queries */
  ${media.desktop} {
    background: dodgerblue;
  }
  ${media.tablet} {
    background: mediumseagreen;
  }
  ${media.phone} {
    background: palevioletred;
  }
`;
render(<Content />);

 

출처 :

• https://blog.agney.dev/styled-components-&-typescript/
• https://velog.io/@hwang-eunji/styled-component-typescript