React 리액트 - 리액트 style 활용 방법 global.js

 

 

styles > global.js

 

 

 

 

global.js는 리액트의 글로벌 스타일 정의 파일
-> 프로젝트 전체 속성을 한꺼번에 정의할 수 있다

 

** common.js가 공통적으로 자주 사용하는 속성이라면

global.js는 프로젝트 전체 속성 및 스타일을 정의한다

 

 

기본 스타일 리셋

 

 

 

 

 

 

기본적으로 가지고 있는 스타일이 있다

-> 패딩, 마진 등이 기본적으로 적용되어 있음

-> 고유 스타일을 적용하기 위해 기본 스타일을 리셋해주어야 함

 

 

<global.js>

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset"; // reset이라는 패키지를 가져올 수 있다

const GlobalStyle = createGlobalStyle`
  // style reset
  ${reset} // -> 전체 스타일이 초기화됨

export default GlobalStyle;

 

 

- 컴포넌트를 생성해 style reset을 적용

 

 

<App.js>

import React from 'react';
import './App.css';
import GlobalStyle from './styles/global';
import Styled04 from './pages/styled/Styled04';

function App() {
  return (
    <>
      <GlobalStyle /> 삭제금지: 프로젝트 전체 스타일 적용
      <Styled04 />
    </>
  );
}

export default App;

 

 

- 메인 파일의 컴포넌트 위에 GlobalStyle을 적용

 

 

 

https://developernew.tistory.com/447

React 리액트 - 리액트 style 활용 방법 theme.js

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법