Global Styles

키워드

Reset CSS
box-sizing 속성
word-break 속성
Theme
ThemeProvider

Reset CSS

Reset Css

styled-reset

브라우저마다 초깃값이 달랏었기 때문에, 초기화하는 기법이 생겼다.

패키지 설치.

npm i styled-reset

​ App 컴포넌트에서 사용.

import { Reset } from 'styled-reset';

export default function App() {
 return (
  <>
   <Reset />
   <Greeting />
  </>
 );
}

Global Style

createGlobalStyle

대체 CSS box model

box-sizing

The 62.5% Font Size Trick

keep-all-villain

word-break

전역 스타일 지정.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
 html {
  box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
  box-sizing: inherit;
 }
 
 html {
  font-size: 62.5%;
 }
 
 body {
  font-size: 1.6rem;
 }
 
 :lang(ko) {
  h1, h2, h3 {
   word-break: keep-all;
  }
 }
`;

export default GlobalStyle;

import { Reset } from 'styled-reset';

import GlobalStyle from './styles/GlobalStyle';

export default function App() {
 return (
  <>
   <Reset />
   <GlobalStyle />
   <Greeting />
  </>
 );
}