typescript react에서 styled-component 사용하기

타입스크립트 기반의 리액트 프로젝트에서 styled-component를 설치하는 방법

1. styled-components 의존성 설치

with npm
npm install --save styled-components
with yarn
yarn add styled-components

javacript에서 사용한다면 문제는 없지만, typescript에서 오류없이 사용하기 위해서는 styled-component의 type들을 가지고 와야한다

with npm
npm i --save-dev @types/styled-components
with yarn
yatn add --dev @types/styled-components

2. 첫 styled component 생성

styled import 하기

import styled from 'styled-components';

생성할 document element를 선택

const StyledLink = styled(Link)``;

css 작성하듯이 스타일 추가하여 export하면 다른 컴포넌트에서 사용이 가능하다.

<script>
import styled from "styled-components";

const StyledLink = styled(Link)`
  text-decoration: none;
  &:focus,
  &:hover,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  }
`;

export default StyledLink;
</script>