반응형
globalStyle 작성
- reset 할 것들과 공용으로 사용할 글꼴을 넣어줌
- 글꼴은 나눔스퀘어라운드 중 두꺼운걸 쓰기 위해 cdn으로 넣어줌
- normal 은 나중에 theme 으로 바꿔줄 예정
import { css } from '@emotion/react';
import { normal } from './styleGuide';
const globalStyle = css({
'*': {
padding: 0,
margin: 0,
boxSizing: 'border-box',
fontFamily: 'NanumSquareRound, sans-serif',
},
a: {
textDecoration: 'none',
color: normal['text'],
cursor: 'pointer',
},
li: {
listStyle: 'none',
},
button: {
border: 'none',
background: 'none',
},
input: {
'&:focus': { outline: 'none' },
},
});
export default globalStyle;
pages/_app.tsx에 반영
- _app.tsx를 cra 의 index.js 라고 생각하면 좀 편한 것 같다
- 그냥 컴포넌트 위에 살포시 올려놔주면 된다
import Head from 'next/head';
import { AppProps } from 'next/app';
import { Global, ThemeProvider } from '@emotion/react'; // add
import globalStyle from '../styles/globalStyle';
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} /> // add
<Component {...pageProps} />
</>
);
}
export default App;생각보다 간단하게next js 에서
emotion을 사용하여 globalStyle 을 추가했다
사실 시간은 오래 걸렸는데 하고 보니까 간단했다
반응형
'프로젝트 > ez-thumbnail' 카테고리의 다른 글
| #4 레이아웃 컴포넌트, theme 적용 (next, emotion, tsx) (0) | 2021.08.19 |
|---|---|
| #3 html2Canvas를 이용한 html 이미지 저장 (0) | 2021.08.19 |
| #1 프로젝트 세팅 (0) | 2021.08.13 |
