1
2
3
4
5
6
7
8
9
10
11
| 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 타입을 단언해주면된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
| 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>
);
}
|
댓글 공유