styled-component: hover, ellipsis

styled-component에서 부모컴포넌트에서 자식컴포넌트에 hover 효과 적용하기

hover를 적용하기 위해서는 hover의 대상이 자식컴포넌트일지라도 먼저 선언되어야 합니다.

const SupplyName = styled.strong`
  font-weight: 500;
  color: #555;
`;

const SupplyItem = styled.div`
  width: 180px;
  font-size: 15px;
  cursor: pointer;

  &:hover ${SupplyName} {
    color: #000;
  }
`;

=> SupplyItem이 부모컴포넌트이고, SupplyName이 자식컴포넌트입니다. 
=> 흐름상 부모컴포넌트가 위쪽에 위치해야할 것 같지만, hover의 대상이 선언되지 않아 에러가 발생합니다.

 

 

Ellipsis 적용하기

const SupplyName = styled.strong`
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  font-weight: 500;
  color: #555;
`;

display: -webkit-box;

-webkit-line-clamp: 1;(최대 텍스트 라인 수)

-webkit-box-orient: vertical; 

white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
이렇게 한 세트입니다.

 

width를 넘어서는 text는 ... 처리가 됩니다.