[Styled Components] 세팅

*설치 : yarn add styled-components, yarn add styled-reset(초기설정)

 

세팅

• styles 폴더 내부에 GlobalStyle.js, GlobalFonts.js, theme.js(반응형) 파일 생성
  • GlobalStyle

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
menu, ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
box-sizing: border-box;
}
body {
font-weight: 300;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.2;

}
a {
text-decoration:none;
color:inherit;
}`;

export default GlobalStyle;

• GlobalFonts.js 

import { createGlobalStyle } from 'styled-components';
import 폰트명 from '폰트 파일';

export default createGlobalStyle`		      
  @font-face {
    font-family: '폰트명';
    src: local('폰트명'),   
    url(${폰트명}) format('woff');
    font-weight: 300; 		
    font-style: normal;
  }
`;

• theme.js

const size = {
  mobile: '600px',
  tablet: '900px',
  laptop: '1200px',
  desktop: '1800px',
};

const theme = {
  mainColor: '#0a4297',
  mobile: `(max-width: ${size.mobile})`,
  tablet: `(max-width: ${size.tablet})`,
  laptop: `(max-width: ${size.laptop})`,
  desktop: `(min-width: ${size.desktop})`,
};

export default theme;

• index.js 파일에 적용시키기 (themeProvider는 단일자식만 있어야함, style은 가장 위에 적용

import React from 'react';
import ReactDOM from 'react-dom/client';
import GlobalStyle from './styles/GlobalStyles';
import GlobalFonts from './styles/fonts';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalStyle />
    <GlobalFonts />
    <App />
  </React.StrictMode>
);

reportWebVitals();

 

참고 : https://velog.io/@taylorkwon92/React-TypeScript-Styled-Components-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

React + TypeScript + Styled-Components 초기 세팅하기

 

폰트 : https://velog.io/@mokyoungg/Styled-Components-import-font

[Styled-Components] import font