[React] Style-components

Css-in-js (Style-components)

리액트에서 css를 다루는 방법으로는 첫번째는 스타일 자체를 컴포넌트로 만들어서 css를 입혀주는 방법이다. css-in-js의 라이브러리로 패키지 관리자를 통해 스타일 컴포넌트를 깔아줘야 한다.

// npm
npm install styled-components

// yarn 
yarn add styled-components

import styled from 'styled-components';
import TestPage from './TestPage';
import GlobalStyle from './GlobalStyle';

// CSS-in-JS: 자바스크립트로 CSS 코드를 작성하는 방식
// props를 통해서 [부모] -> [자식] 조건부 스타일링 가능
const StyleContainer = styled.div`
  display: flex;
`;

const StyleBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  background-color: ${(props) => props.backgroundColor};
  margin: 20px;
`;

const StyleP = styled.p`
  color: blue;
`;

function App() {
  return (
    <>
      <StyleContainer>
        <StyleBox borderColor="orange" backgroundColor="lightpink">
          <StyleP>p태그</StyleP>
        </StyleBox>
        <StyleBox borderColor="blue" backgroundColor="lightblue">
          <StyleP>p태그</StyleP>
        </StyleBox>
        <StyleBox borderColor="violet" backgroundColor="lightgrey">
          <StyleP>p태그</StyleP>
        </StyleBox>
    </>
  );
}

export default App;

위의 예시코드처럼 컴포넌트 자체에 이름으로 스타일을 적용시킬 수 있다. vs코드에서 확장프로그램인 vscode-styled-components을 깔면 관련된 이름들을 자동완성 시켜준다.