Styled Component 심화 1 - Component Selector

 

https://styled-components.com/docs/advanced#referring-to-other-components

See the Pen Untitled by JEONG (@cona) on CodePen.

 

 

const Remove = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dee2e6;
  font-size: 24px;
  cursor: pointer;
  display: none;
`;

const Link = styled.a`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: palevioletred;
  
  //Link hover 할때 하위컴포넌트인 Remove 나타나게 함
  &:hover {
    ${Remove} {
      display: block;
    }
  }
`;

const Icon = styled.svg`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  //상위 컴포넌트인 Link hover 할때 Icon 의 fill 변화	
  ${Link}:hover & {
    fill: rebeccapurple;
  }
`;

const Label = styled.p`
  display: flex;
  align-items: center;
  line-height: 1.2;

  &::before {
    content: '◀';
    margin: 0 10px;
  }
`;

const Test = () => {
  return (
    <Link href='#'>
      <Icon viewBox='0 0 20 20'>
        <path d='M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z' />
      </Icon>
      <Label>Hovering my parent changes my style!</Label>
      <Remove>TEST</Remove>
    </Link>
  );
};

 

Styled Component는 상위의 컴포넌트의 조건에 따라 자신의 css를 바꿀 수 있고

  ${Link}:hover & {
    fill: rebeccapurple;
  }

자신의 조건에 따라 하위 컴포넌트의 css를 바꿀 수 있다.

  &:hover {
    ${Remove} {
      display: block;
    }
  }