1. GlobalStyle
공통으로 적용할 css코드는 createGlobalStyle를 통해 전역에서 사용하기 위한 스타일 컴포넌트를 생성할 수 있음.
2. reset.css
$ npm install styled-reset설치- createGlobalStyle 안에
${reset}선언
3. 웹 폰트 폰트 설정
1) index.html - link 걸고
<head>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;900&display=swap"
rel="stylesheet"
/>
</head>2) GlobalStyle.js에서 폰트 적용해줌
🔆 코드 사용 예제
< GlobalStyle.js >
전역에서 사용할 css 코드 작성해줌
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
const GlobalStyle = createGlobalStyle` // [p1] 전역에서 사용할 css 작성
${reset} // [P2] reset.css 걸음
* {
box-sizing: border-box;
}
html {
font-family: 'Noto Sans KR', sans-serif; // [p3] 폰트 적용
}
a, button {
cursor: pointer;
}
a{
text-decoration: none;
color: black;
}
`;
export default GlobalStyle;
< index.js >
GlobalStyle를 컴포넌트 상위에 적용하면 하위 컴포넌트 전역에 글로벌 스타일이 적용됨.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './styles/GlobalStyle';
import theme from './styles/theme';
import variables from './styles/variables';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ThemeProvider theme={{ style: theme, variables }}>
<GlobalStyle /> // ✅
<Router />
</ThemeProvider>
);
~23.05