styled component 동적 스타일링 하기

개념 체크

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;
    `}
`;