&& 연산자로 구체성 높여서 부모 스타일 덮어씌우기

// 기존 코드 : 첫 번째만 font-weight을 다르게 주려고 구현한 방법

export const TableBody = styled.tbody`
  tr > td {
    font-weight: 700;
    }

    &:first-child {
     font-weight: 500;
  }
   `

 

⭐️ 코드 설명

: 기존 코드는 부모에서 이미  font-weight: 700 을 적용하였고, 그 밑에 바로 nth:child로

해당 항목에 font-weight: 500 을 주어 우선순위 높은 자식이 적용되어 스타일 덮어쓰기가 가능했음.

 

하지만, 리팩토링을 하며 이 부분을 styled-component로 분리하며, 문제 발생

 

 

 

// 문제가 있던 코드 : 자식의 스타일이 입혀지지 않음

export const TableBody = styled.tbody`
  tr > td {
    font-weight: 700;
  }
`

export const TableTd = styled.td`
    font-weight: 500;
  }
`

 

🔥 문제 설명

: 부모의 구체성이 높아서 우선순위가 더 높아짐 -> 자식의 스타일이 적용되지 않는 문제

 

이 부분을 해결하려면 부모에서 font-weight: 700을 제거하고 자식에서 직접 font-weight: 500을 적용하는 방법이 있는데,

여러 군데에 추가해주어야 해서 비효율적이라고 생각함..

 

 

🍀 해결법

styled-component 에서는 && 연산자를 사용하면, 구체성을 높여 부모보다 우선순위를 높일 수 있음.

// 최종 코드 :  &&로 구체성을 높여 우선순위를 높임.

export const TableBody = styled.tbody`
  tr > td {
    font-weight: 700;
  }
`
export const TableTd = styled.td`
  && {
    font-weight: 500;
  }
`

 

 

&는 선택자 그 자체를 나타내기 때문에, &&&도 같은 원리로 구체성을 높이는데 사용 가능하다고 합니다!

같은 원리로 emotion에서도 사용 가능!

 

모든 경우에 사용 가능한 방법은 아니지만, 구체성을 높일 수 있는 방법에 대해 처음 알게 되어 작성합니당

배워도 배워도 새로운 것 투성이.. ㅎㅎ