TypeScript props css boolean 적용(+style-components)

 

 

 

props로 css 변경을 원할 때 사용하는 코드를 그 동안은 

 

const Container = styled.div`
  background-color: ${(props) => props.color};
`

<Container 
  color={event? "red" : "white"}
>테스트</Container>

 

위와 같이 작성을 해주었었다.

여기서 event는 내가 만든 함수라 각자 만든 함수명을 입력해주면 되는데, 이렇게 작성하게 될 경우 문제는 코드가 불필요하게 길어지고 인라인으로 css를 지정한다는 것이다.

 

 

✅ boolean으로 스타일 컴포넌트에서 css 적용하기

 

1️⃣ boolean으로 스타일 컴포넌트  +  useState 작성

 

const Container = styled.div`
  background-color: ${({event}) => event ? "red" : "white"};
`

 

const [event, setEvent] = useState<boolean>(false);

 

2️⃣ event 타입 지정해주기 + 스타일 컴포넌트에도 적용

 

interface ContainerProps {
	event?: boolean;
}

const Container = styled.div<ContainerProps>`
	...
`

 

 

3️⃣ 코드에 적용하기

 

<Container
  evnet={event}
>테스트</Container>

 

 

굉장히 간단하게 코드가 변경된 것을 알 수 있다.

여러가지 css 기능을 함께 적용시키고싶으면, 아래와 같이 똑같이 적으면 된다.

 

 

const Container = styled.div`
  background-color: ${({event}) => event ? "red" : "white"};
  backdrop-filter: ${({event}) => event ? "blur(10px)" : "blur(0px)"};
`