styled.d.ts 파일 작성
import 'styled-components';
declare module 'styled-components' {
export interface 인터페이스명지정 {
속성1 : 타입지정;
}
export type 타입명 = {
속성1 : 타입지정;
}
export interface DefaultTheme {
mainBackground: string,
textColor: string
}
}
많이 사용하는 css 변수 등록하는 theme 파일 작성
import { DefaultTheme } from "styled-components";
const theme: DefaultTheme = {
mainBackground: '#fff',
textColor: '#292B2E'
}
export default theme;
스타일 적용
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import theme from './styles/theme';
const Container = styled.div`
background-color: ${(props) => props.theme.mainBackground};
color: ${(props) => props.theme.textColor};
`;
function App() {
return (
<ThemeProvider theme={theme}>
<Container>
<h1>테마 적용하기</h1>
</Container>
</ThemeProvider>
);
}
export default App;
스타일 작성하기
1. 단일 props 사용시
const Container = styled.div< { age : number } >`
color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;
2. 다수 props 사용시: interface 사용
- 인터페이스로 분리하여 타입지정하는것 뿐 이외에 사용법은 동일
interface Container extends 상속타입 {
isActive: boolean;
age: number;
프롭스명: 타입지정;
}
const Container = styled.div<Container>`
color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;