-
리액트 타입스크립트 스타일컴포넌트 Theme 적용하기React/React+TypeScript 2023. 2. 22. 03:06
1. styled.d.ts 파일을 만든다. 속에 interface 를 만든다.
import "styled-components"; declare module "styled-components" { export interface UsingTheme { textColor: string; bgColor: string; btnColor: string; } }
2. 해당 interface 를 적용할 theme.ts 를 만든다.
(단 여기서 UsingTheme 부분이 defaultTheme 로 쓰이면 안된다. 해당 단어는 기본설정이라 변경하면 다 적용되어버린다.)
import { UsingTheme } from "styled-components"; export const lightTheme: UsingTheme = { bgColor: "white", textColor: "black", btnColor: "tomato", }; export const darkTheme: UsingTheme = { bgColor: "black", textColor: "white", btnColor: "teal", };
3. tsx 파일에 import 하여 사용한다.
import { darkTheme, lightTheme } from "./themeNew"; function App() { const [mode, setMode] = useState<string | null>("darkMode"); const changeMode = () => { if (mode === "darkMode") setMode("lightMode"); if (mode === "lightMode") setMode("darkMode"); }; const Wrapper = styled.div` display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; color: ${(props) => props.theme.textColor}; background-color: ${(props) => props.theme.backgroundColor}; `; const WrapperNewTheme = styled(Wrapper)` color: ${(props) => props.theme.textColor}; background-color: ${(props) => props.theme.bgColor}; `; ...(중략) return ( <> <div>타입스크립트를 적용한 테마</div> <ThemeProvider theme={mode === "darkMode" ? darkTheme : lightTheme}> <WrapperNewTheme>Hello</WrapperNewTheme> <button onClick={changeMode}> {mode === "darkMode" ? "lightMode" : "darkMode"} </button> </ThemeProvider> </> )
'React > React+TypeScript' 카테고리의 다른 글
TypeScript 기반 React 시작하기 with Styled-Components (0) 2023.02.23 React+TypeScript Form 형식을 공부해보자! (0) 2023.02.22 ? / ?? 리액트 타입스크립트 props 전달할때 optional Chaining & null Check (0) 2023.02.21 React + TypeScript 에서 props 전달하는 법 with styled-components (0) 2023.02.21 타입스크립트로 리액트 시작하기 + 기본 문법 (2) 2023.02.18