[TIL #24] 20240522 GlobalStyles

오늘 하려고 했던 일

• 리액트 강의 다듣기
• 스탠다드 과제 끝내기
• 개인과제 초기세팅
• 알고리즘 문제 풀기

내일 할일

• 개인과제 반절하기

---

GlobalStyles

✔️ 기존

통일성 있는 CSS 적용을 위해 reset.css 파일을 생성했다.

✔️ 현재

Styled Components를 사용하고 있으니 Styled Components에서 제공하는 Global Styled 라는 전역 스타일링을 사용
reset.css와 같은 기능을 한다

styled-components 설치

npm install styled-components

yarn add styled-components styled-reset

적용

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* 추가적인 전역 스타일
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    {/* 애플리케이션 컴포넌트 */}
  </>
);

export default App;

---

ps)

과제가 마치 like 백두산