Styled-Component: Pseudo Selectors

jhplus13·2022년 2월 24일
1

React

목록 보기
10/28

🔶
질문1. &가 쓰이는 경우?

🔶 컴포넌트 안에있는 html요소를 컴포넌트에서 지정하여 스타일 적용할 수 있음.

  • [p1] :span은 Box컴포넌트로 만들지 않았지만, Box컴포넌트 안에서 span을 선택할 수 있음.

  • [p2] :&은 자기자신을 자리키는 것임. (span을 지칭하는 것과 같음.)
    < sass - 부모 선택자(&)의 사용>
    -부모 선택자는 특수문자 '&'을 사용한다.
    -기본적으로 중첩된 Sass 문법 안에서 사용한다.
    -:hover, :checked, :not(&) 등의 가상클래스에 사용된다.
    -:after, :before 등의 가상요소에 사용된다.
    -언더바(_), 하이픈(-) 등의 클래스명의 접속사에 사용한다.
const Box = styled.div`
  background-color: blanchedalmond;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  span {              /* [p1] */
    font-size: 60px;
    &:active {        /* [p2] */
      color: red;
    }
    &:hover {
      font-size: 80px;
    }
    
  } `;
function PracticeApp() {
  return (
    <Father>
      <Box>
         <span>☃︎</span> {/*태그를 다른거로 바꾸면 작용이 안된다는 불편함이 있음 */}
    </Father>
  );
}

🔶 styled component안에 있는 다른 styled component 자체를 지정할 수 있음.

Box컴포넌트에서 Box컴포넌트 안에있는 Emoji컴포넌트를 지정할 수 있음.

const Emoji = styled.span`
  font-size: 40px;
`;

const Box = styled.div`
  background-color: blanchedalmond;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
 
  ${Emoji}:hover {
    color: red;
  }
  /* emoji컴포넌트에 있는 모든 요소에 마우스를 올리면 색깔이 빨강으로 바뀜. */
`;
function PracticeApp() {
  return (
    <Father>
      
      <Box>
        <Emoji as="span">☃︎</Emoji> {/*태그를 span,p 등 뭘로 바꿔도 잘 작용됨 */}
      </Box>
      
      <Emoji as="span">☃︎</Emoji> {/* 여긴 hover 안먹음 */}
    </Father>
  );
}
profile
Front-end Dev

0개의 댓글