[Clone YouTube]Global Style

styled components를 이용해 컴포넌트별로 스타일을 하다 보니, 부모 자식 관계가 아님에도 반복해서 적용되는 동일한 스타일을 어떻게 처리해야 할지 고민하게 되었다. 이를 조사한 결과, 글로벌 스타일 파일을 하나 만들어 App.js에 적용해 주면 된다는 것을 알게 되었다.

 

 

1. GlobalIconStyle

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  .globalIconBtnRect {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: hsl(0, 0%, 38%);
    :hover {
      cursor: pointer;
    }
    :active {
      background-color: hsl(0, 0%, 70%);
    }
  }

  .globalIconBtn {
    height: 40px;
    width: 40px;
    border-radius: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: hsl(0, 0%, 38%);
    :active {
      background-color: hsl(0, 0%, 80%);
    }
    :hover {
      cursor: pointer;
    }
}
`;

export default GlobalStyle;

위와 같이, GlobalStyle.jsx 파일을 새롭게 만들고, createGlobalStyle을 import했다. 그리고 styled-component를 만들 때와 마찬가지로 태그명을 정의하되, html 요소 대신 createGlobalStyle로 요소를 정의한다. 이후 적용하고 싶은 클래스나 태그별로 공통된 스타일을 적용시킨다.

 

 

2. App.js

import React from "react";
import { Route, BrowserRouter as Router } from "react-router-dom";
import Main from "./components/Main";
import Playing from "./components/routes/Playing";
import GlobalStyle from "./styles/GlobalStyle";

const App = () => {
  return (
    <Router>
      <GlobalStyle />
      <Route exact path="/" component={Main} />
      <Route path="/playing/:videoName" component={Playing} />
    </Router>
  );
};

export default App;

저장된 GlobalStyle을 App.js에 적용시킨다. 이를 통해, 해당 스타일을 적용하고 싶은 아이콘에 글로벌 스타일 클래스를 부여하고, 수정이 필요하다면 필요한 부분을 해당 컴포넌트의 styled component를 정의하여 적용시켜줄 수 있다.