css 초기화를 위해 styled-reset 설치
npm install styled-reset styled-components
styled-components는 local로 동작한다.
개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있다.
그러므로 GlobalStyles.js 파일을 생성해 Global Style을 관리한다.
createGlobalStyle() 함수로 전역 스타일 컴포넌트를 생성한다.
GlobalStyle.js
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
${reset};
body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
width: 350px;
height: 600px;
}
*{
box-sizing: border-box;
}
`;
export default GlobalStyle;
App.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import GlobalStyle from "./GlobalStyle";
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
<App />
</React.StrictMode>,
document.getElementById("root")
);
App.js 혹은 index.js 등 라우터를 설정해주는 부분에서 GlobalStyle을 불러와 적용 시켜준다.
애플리케이션의 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다.
이때 주의해야할점은! 적용하고 싶은 컴포넌트에 감싸는것이 아니라 같은 레벨에다가 두어야 한다.
<GlobalStyle> 이렇게. 제대로 안보고 감쌌다가 삽질할 뻔했다. ^^;
참고
'FRONT > REACT' 카테고리의 다른 글
[React] Styled Component 자동완성 플러그인 (0) | 2022.02.26 |
---|---|
[React] 함수형 컴포넌트 자동 완성 snippet-단축키 (0) | 2022.02.24 |
[React] React.memo 사용법 (0) | 2022.02.16 |
타입스크립트 React.FormEvent (0) | 2022.01.22 |
[React] Styled Component (Themes) (0) | 2022.01.20 |