반응형
theme 생성
// styles/theme.tsx
export const theme: defaultTheme = {
light: {
mainBackground: '#fff',
primary: '#037e8f',
secondary: '#3983ad',
secondaryVariant: '#65b2bf',
text: '#333',
error: '#ed7979',
},
dark: {
mainBackground: '#494D5F',
primary: '#8458B3',
secondary: '#d0bdf4',
secondaryVariant: '#a0d2eb',
text: '#e5eaf5',
error: '#ed9d8e',
},
};
타입 스크립트를 사용하고 있으니 타이핑도 해주었다
이런식으로 해놓으면 객체에 새로운 요소를 추가해도 type을 건드릴 필요가 없을 것 같다!
// styles/theme.tsx
export interface defaultTheme {
[name: string]: {
[key: string]: string;
};
}
pages/_app.tsx 에 theme 적용 & Layout 컴포넌트 추가
- ThemeProvider 를 import 한 후 컴포넌트를 감싸준다
- ThemeProvider에 theme 을 넣어준다
import Head from 'next/head';
import { AppProps } from 'next/app';
import { Global, ThemeProvider } from '@emotion/react'; // add
import globalStyle from '../styles/globalStyle';
import { theme } from '../styles/theme'; // add
import { Layout } from '../commons/Layout'; // add
function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"
/>
<title>Ez Thumbnail</title>
</Head>
<Global styles={globalStyle} />
<ThemeProvider theme={theme}> // add
<Layout theme={theme}> // add
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</>
);
}
export default App;
Layout 컴포넌트 생성 후 theme 적용
// commons/Layout/Layout.tsx
import React from 'react';
import styled from '@emotion/styled';
import { defaultTheme } from '../../styles/theme';
import { LayoutProps } from './types/LayoutProps';
function Layout({ children, theme }: LayoutProps) {
return <LayoutContainer theme={theme}>{children}</LayoutContainer>;
}
const LayoutContainer = styled.div<{
theme: defaultTheme;
}>(({ theme }) => ({
background: theme.light.mainBackground,
width: 1000,
margin: 'auto',
marginTop: 40,
}));
export default Layout;
type 값은 따로 분리를 해놓았다
// commons/Layout/types/LayoutProps.tsx
import React from 'react';
import { defaultTheme } from '../../../styles/theme';
export interface LayoutProps {
children: React.ReactNode;
theme: defaultTheme;
}타이핑을 제대로 하지 않으면
자꾸 빨간 줄이 뜬다.... ㅠㅠ
React.ReactNode, ReactChildren 등의 타입에 대해 공부를 더 해야겠다
반응형
'프로젝트 > ez-thumbnail' 카테고리의 다른 글
| #3 html2Canvas를 이용한 html 이미지 저장 (0) | 2021.08.19 |
|---|---|
| #2 Global Style 추가 (emotion) (0) | 2021.08.19 |
| #1 프로젝트 세팅 (0) | 2021.08.13 |
