210323_ TIL / 프로젝트 홈

rlatmdgns94·2021년 4월 16일
0

flow-clone_TIL

목록 보기
7/12

오늘 할 일

  1. 프로젝트 홈 상단 바둑판 , 리스트 버튼
  2. 필터, 설정 버튼
  3. 프로젝트 즐겨찾기 버튼

버튼의 경우 3가지 타입이 있다 - default , hover, active

styled 컴포넌트 active 일경우 처리 방식

background-image: url('/images/icons/icon_star.png');

${(props) =>
    props.active
      ? css`
          background-image: url('/images/icons/icon_star_active.png');
        `
      : css`
          &:hover {
            background-image: url('/images/icons/icon_star_hover.png');
          }
        `}

<ProJectStarButton type="button" active></ProJectStarButton>
/*
props 에 active 가 있을 경우, 삼항 연산자로 해서 덮는 방식이다 
이렇게 하면 active 일때 hover 기능이 안된다.
*/

관심 있을 만한 포스트

0개의 댓글