감정 스타일 구성 요소 [튜토리얼]

Styled Components는 표준이 되고 있습니다.

Styled Components는 컴포넌트 기반 프레임워크(예: React, Angular, Vue) 내에서 작업할 때 완벽한 페어링이므로 업계에서 이러한 유형의 스타일링에 대한 인기가 높아지는 것은 놀라운 일이 아닙니다. 스타일 구성 요소는 엄격한 CSS와 매우 유사하지만 새로 도입된 개발자가 이 라이브러리로 작업을 시작하기 어렵게 만들 수 있는 몇 가지 구문 차이점이 있습니다. 이 튜토리얼에서는 Styled Components로 작업할 때 가장 일반적인 사용 사례와 이를 자신의 프로젝트에 구현하는 방법을 살펴보겠습니다.

HTML 태그 스타일 지정

먼저 Styled Component를 초기화해야 합니다. 그런 다음 다른 기능 구성 요소와 마찬가지로 스타일 구성 요소를 사용할 수 있지만 이제 추가한 스타일이 포함됩니다.

const Styledbutton = styled.button`
  background-color: red;
`;

<Styledbutton>Styled button</Styledbutton>

미리 빌드된 구성 요소 스타일 지정

미리 빌드된 구성 요소를 사용할 때 초기화 프로세스는 정확히 동일하지만 도트 연산자를 사용하는 대신 구성 요소를 괄호로 묶어야 합니다.

import { Button } from "react-bootstrap";

const StyledButton = styled(Button)`
  background-color: red;
`;

<StyledButton>Styled button</StyledButton>

중첩 선택자 스타일 지정

종종 미리 빌드된 구성 요소로 작업할 때 스타일 요구 사항을 수용하기 위해 중첩 속성을 변경해야 하는 상황에 직면할 수 있습니다. 선택하려는 항목 앞에 '&'를 추가하면 됩니다.

import { Button } from "react-bootstrap";.

const StyledSuccessButton = styled(Button)`
  &.btn-success {
    background-color: red;
  }
`;

<StyledSuccessButton>Styled button</StyledSuccessButton>

미디어 쿼리 스타일 지정

반응형 웹 디자인은 현대 기술 시대에 웹 개발자가 구현하는 가장 중요한 기능 중 하나입니다. 미디어 쿼리로 스타일 구성 요소를 조정하는 것은 매우 간단합니다. 미디어 키워드 앞에 CSS at-rule을 포함하기만 하면 됩니다.

import { Button } from "react-bootstrap";

const StyledMediaQueryButton = styled(Button)`
  @media (max-width: 650px) {
    background-color: red;
  }
`;

<StyledMediaQueryButton>Styled button</StyledMediaQueryButton>

소품으로 스타일링

기본 CSS에 비해 Styled Components의 주요 개선 사항 중 하나는 외부 요인에 따라 동적으로 스타일을 변경하는 데 사용할 수 있는 구성 요소에 소품을 전달하는 기능입니다. 모든 Styled Component에는 해당 구성 요소가 렌더링되는 방식을 변경하는 데 사용할 수 있는 추가 데이터를 추출하기 위해 액세스할 수 있는 'props' 속성이 있습니다.

import { Button } from "react-bootstrap";

const StyledPropsButton = styled(Button)`
  background-color: ${(props) => props.bgcolor};
`;

<StyledPropsButton>Styled button</StyledPropsButton>

조건부 소품으로 스타일 지정

스타일 구성 요소는 기능적 렌더링을 허용하므로 구성 요소에 전달된 소품을 기반으로 구성 요소가 렌더링되는 방식을 변경하는 조건문을 구현하는 것은 매우 쉽습니다.

import { Button } from "react-bootstrap";

const StyledConditionalPropsButton = styled(Button)`
  background-color: ${(props) => (props.isRed ? 'red' : 'green')};
`;

<StyledConditionalPropsButton>Styled button</StyledConditionalPropsButton>

데모 코드