스타일 컴포넌트(Styled Component) 잘 사용하기

extends : 상속 & 확장

스타일 속성을 상속받아 스타일 재정의해 사용이 가능하다.

const 스타일컴포넌트 = styled(상속받는컴포넌트이름)``

const Gold = styled.div`
  margin-top: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 259px;
  height: 40px;
  gap: 14px;
  span {
    font-family: "MaplestoryOTFBold";
    font-weight: 700;
    font-size: 2rem;
    color: #f27808;
  }
  img {
    width: 40px;
  }
`;

gold라는 스타일 컴포넌트가 있을 때
이거랑 비슷한데 약간의 변화만 주고 싶다면

const Silver = styled(Gold)` //Gold를 상속받는다는 것
  width: 210px;
  height: 30px;
  gap: 17px;
  span {
    font-size: 1.6rem;
    color: #595550;
  }
  img {
    width: 30px;
  }
`;

className 이용해 다양하게 쓰기

const StButton = styled.button`
  margin-top: border-radius: 12px;
  &.reverse {
    background-color:"#FFFDFA";
   }
`;

&. 클래스네임 하면 클래스네임에 맞는 스타일을 따로 지정해줄 수 있다!