styled component 동적 스타일링 하기

arrrrrr·2023년 2월 24일

React 공부중 🎽

목록 보기
10/16

개념 체크

import styled, { css } from "styled-components";
  • 'css'는 styled-components에서 제공하는 함수이다.
  • 해당 컴포넌트의 속성(props)에 따라 동적으로 스타일을 변경할 수 있도록 해준다.

예시 코드

  • props로 isChecked가 전달되면 해당 div 컴포넌트에 'color', 'font-weight' 스타일을 추가해준다.
  • 이는 isChecked props 값이 true 일 때만 추가 스타일링을 적용해주기 위한 방법이다.
  • 이렇게 동적 스타일링을 적용하면 코드의 재사용성과 가독성을 높일 수 있다.
const Desc = styled.div`
  position: relative;
  top: 5px;
  left: 44%;
  ${(props) =>
    props.isChecked &&
    css`
      color: rgb(167, 114, 125);
      font-weight: bold;
    `}
`;

0개의 댓글