Styled-Components 에서 createGlobalStyle 사용하기

Styled-Components에서 margin: 0, padding: 0, font-family 같이 Global한 속성들을 적용시킬 수 있게 해주는 방법이 있다.

우선 createGlobalStyle 을 import 해준다.

// style/global.js
import { createGlobalStyle } from 'styled-components';

그 다음 GlobalStyle 을 생성해준다. 코드 안쪽에는 적용시킬 스타일 css를 입력해준다.

// style/global.js
const GlobalStyle = createGlobalStyle`
* {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
}
`;
// 위 코드 주석아님 !!! velog에서 색깔이 초록색일뿐

export default GlobalStyle;

최상위 컴포넌트에 적어주면 적용이 된다.

// App.js
import GlobalStyle from './style/global';

function App() {
  return (
    <>
      <GlobalStyle/>
        <div className="App">
          <div>Test !!</div>
        </div>
    </>
  );
}

더욱 자세한 설명은 여기 Styled-Components