styled-components

styled-components

• // npm i styled-components 
  import styled from 'styled-components'
  

• // 백틱으로 감싼다.
  const Header = styled.header`
  height: 44,
  background: "white",
  position: "relative",
  padding: 0,
  textAlign: "center",`;
  

• // 기존 컴포넌트는 괄호를 사용해서 css를 덮을수있다.
  export const CloseBtn = styled(Icon)`
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px;
    line-height: 14px;
    cursor: pointer;
  `;
  

• // styled-components SSR
  import { serverStyleSheet } from 'styled-components' 
  const sheet = new ServerStyleSheet(); 
   // 그 다음 랜더페이지를 sheet.collectStyles()로 감싸준다.
   const styleTags = sheet.getStyleElement();

  • 공식문서 : https://styled-components.com/docs/advanced#server-side-rendering