Emotion Styled Components에서 props 지정하기

import styled from "@emotion/styled";

const StyledButton = styled.button`
  width: 100px;
  height: 50px;
  color: ${(props) => (props.isClicked ? "green" : "white")};
`;

function Btn() {
  return <StyledButton isClicked>선택하기</StyledButton>;
}

• 위와 같이 사용하게 되면 StyledButton 에 커스텀 props를 타입 선언을 해주지 않았기 때문에 에러를 발생한다.

이를 해결하기 위해 커스텀 props 타입을 단언해주면된다.

import styled from "@emotion/styled";

const StyledButton = styled.button<{ isClicked: boolean }>`
  width: 100px;
  height: 50px;
  color: ${(props) => (props.isClicked ? "green" : "white")};
`;

function Btn({ isClicked }: { isClicked: boolean }) {
  return (
    <StyledButton isClicked={isClicked}>선택하기</StyledButton>
    );
}