[TIL] 2023.09.06 - &

 & 

• & : active - ButtonL1이 활성화되면 {}를 적용시켜라!
• "&"를 사용하면 현재 스타일드 컴포넌트의 자기 자신을 나타
• 활성화 상태: onClick을 예로 들면 클릭해서 떼는 시점까지를 말함

const ButtonL1 = styled.button`
  width: 200px;
  height: 50px;
  margin: 5px 5px;
  border-radius: 5px;
  border: 3px solid green;
  background-color: white;
  font-weight: 700;
  cursor: pointer;
  
  // 내용물 정렬
  display: flex;
  flex-direction : row;
  justify-content: center;
  align-items: center;

  &:active {
    background-color: #e3e3e3;
  }
`

 

 참고 

•  https://webclub.tistory.com/396

LESS Parent Selector(&)