[React] UI 만들기 styled-components

CSS를 Component별로 입히기 위해서는 styled-components를 사용하자

설치하기

yarn add styled-components

소스코드 예제

NewsListBlock의 css를 정의하고 rendering하는 곳에 CSS의 block으로 포장하면 정상적으로 css가 입힌다.

import React from 'react';
import styled from 'styled-components';
import NewsItem from './NewsItem';

const NewsListBlock = styled.div`
  box-sizing: border-box;
  padding-bottom: 3rem;
  iwidth: 768px;
  margin: 0 auto;
  margin-top: 2rem;
  @media screen and (max-width: 768px) {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
`;

const NewsList = () => {
  return (
    <NewsListBlock>  
      (...)
    </NewsListBlock>
  );
};