[TIL] 6주차 월요일. React 숙련 주차 - CSS in JS, styled-components

세팅

1. VSCode 플러그인

• vscode-styled-components
  이 플러그인을 설치하면 styled-components 안에서 스타일 코드를 편하게 작성할 수 있다.

2. 설치

   yarn add styled-components

기본 구조

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import 한다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만든다. 
const StBox = styled.div`
	// 이 안에 css와 동일한 형식으로 스타일 코드를 작성한다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용한다.
  return <StBox>박스</StBox>;
};

export default App;