-
Styled-Components 테마 적용하기React 2021. 7. 30. 19:37728x90
npm install styled-components
만약 TS를 사용한다면 추가적으로 Types를 설치해 준다.
// react npm install @types/styled-components // react-native npm install @types/styled-components @types/styled-components-react-native
아래부터는 TS로 설명하겠습니다.
TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다.// styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { main: string; disabled: string; } } //theme.ts import { DefaultTheme } from 'styled-components/native'; const CustomTheme: DefaultTheme = { main: '#226bef', disabled: '#bfbfbf', }; export default CustomTheme;
만약 theme.d.ts파일에서 parse에러가 나온다면 .eslintignore파일을 만들어 예외처리를 해주면 됩니다.
import React from 'react'; import { ThemeProvider } from 'styled-components/native'; import CustomTheme from '@styles/theme'; export default function App(): React.ReactElement { ... return ( <ThemeProvider theme={CustomTheme}> ... </ThemeProvider> ); };
ThemeProvider로 전체를 감싸주면 그 이후로는 아래와 같이 미리 선언한 변수를 사용할 수 있다.
export const ButtonText = styled.span` font-size: 16px; font-weight: 500; margin-right: 27px; color: ${({theme}) => theme.main}; `;
'React' 카테고리의 다른 글
useState와 useEffect를 넘어선 고급 React Hooks (0) 2024.01.29 React useEffect vs useLayoutEffect 차이점 알아보기 (0) 2022.12.15 Stylelint를 이용해 css 정리하기 (feat. Styled-Components) (0) 2022.11.14 React 디자인패턴 (0) 2022.10.07 React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil) (2) 2022.08.16