npm i styled-components
npm i -D @types/styled-components
// global-style.ts
import { createGlobalStyle } from 'styled-components';
// 외부에서 import 할거니까 모듈 내보내자~!
export const GlobalStyle = createGlobalStyle`
/* 그밖에 글로벌 스타일 작성하기 */
`;
// 최상위 컴포넌트 : App.js 또는 index.js 등등 원하는 최상위에 코드 추가
import {GlobalStyle} from '파일경로/global-style.ts'
const App = () => (
<>
<GlobalStyle /> // 여기에 글로벌-스타일-컴포넌트 위치
<div>여기는 최상위 컴포넌트</div>
</>
);
props를 styled-component에 넘겨줄 때 타입을 지정해주지 않으면 오류가 난다.
//text.ts
<Text done={done}>{text}</Text>
//testStyle.ts
//이렇게 짜면 오류
export const Text = styled.div`
flex: 1;
font-size: 21px;
color: #495057;
${({ done }) =>
done &&
css`
color: #ced4da;
`}
`;
//이렇게 하면 해결
export const Text = styled.div<{ done: boolean }>`
flex: 1;
font-size: 21px;
color: #495057;
${({ done }) =>
done &&
css`
color: #ced4da;
`}
`;
// styled-components에 1개 props 타입지정
// const Container = styled.div< {프롭스명 : 타입지정} >`
const Container = styled.div< { age : number } >`
color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;
// 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 Container {
isActive: boolean;
age: number;
프롭스명: 타입지정;
}
// 상속받은 컴포넌트에 타입 추가하기
const Container = styled(상속받을 컴포넌트명)<Container>`
color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;