[라이브러리]styled-components

RingKim1·2024년 5월 23일

React

목록 보기
2/6

📌styled-components

  • 스타일을 작성하기 위한 라이브러리
  • 컴포넌트 기반으로 스타일을 정의하고 관리 가능

사전 설치

  1. 패키지 : 2개 set로 설치해서 전역 스타일링을 같이
  • styled-components
  • styled-reset
    크로스브라우징을 위해 스타일링 초기화
  1. 익스텐션
  • vscode-styled-components

    모두가 사용하는 VSCode 에서 조금 더 잘 활용하기 위해 설치 => 자동완성, 색 지정 가능 등

1. 전역 스타일링

  • 개념 : 전체 애플리케이션에 적용되는 공통 스타일링
  • 장점 : 전체 앱의 일관된 스타일 유지 가능

예시 : 전역스타일링을 통해 reset.css를 적용

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}

  /* 추가적인 전역 스타일 정의 */
  body {
    font-family: 'Arial', sans-serif;
    color: #333;
  }
`;

2. 조건부 스타일링

  • 개념 : 컴포넌트의 상태나 props에 따라 스타일이 동적으로 변경되는 것
  • 장점 : 컴포넌트 상태에 따른 시각적 변화 구현 가능

예시

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 8px 16px;
  border: 1px solid blue;
  border-radius: 4px;
`;
profile
커피는 콜드브루

0개의 댓글