내 reactjs 앱의 버튼에 특정 CSS 클래스가 적용되지 않는 이유를 해결하려고합니다. 오류를 찾을 수없는 것 같습니다. 내가 놓친 간단한 것이 확실합니다.
CSS 정의는 다음과 같습니다.
.button-group-right {
justify-content: flex-end;
.toolbox-button {
&:nth-child(2) {
.toolbox-icon {
background-color: $hangupColor;
border: 1px solid $hangupColor;
width: 40px;
height: 40px;
&:hover {
background-color: $hangupColor;
}
svg {
fill: #fff;
}
}
}
}
}
보시다시피 버튼의 인덱스 값이 2이면이 스타일을 적용해야합니다. (기본적으로 빨간색 배경 적용)
끊기 버튼이 인덱스 2임을 증명하기 위해 배열의 내용을 인쇄하는 콘솔 디버그 문을 추가했습니다.
(3) ["overflowmenu", "tileview", "hangup"]
0: "overflowmenu"
1: "tileview"
2: "hangup"
length: 3
__proto__: Array(0)
렌더링 된 HTML 코드는 다음과 같습니다.
<div class="button-group-right">
(div for first 2 buttons removed for simplifying code review)
<div aria-label="Leave the call" class="toolbox-button">
<div>
<div class="toolbox-icon">
<div class="jj-icon">
<svg height="24" width="24" viewBox="0 0 32 32">
<path></path>
</svg>
</div>
</div>
</div>
</div>
</div>
내가 어디를 잃었는지 보시면 나는 모두 귀입니다.
감사.
무슨 nth-child뜻 인지 오해하신 것 같아요 . 중첩 인덱스가 아니라 상위 요소의 배치에 관한 것입니다.
예를 들어 다음 코드에서 :
<html>
<head>
<style>
p:nth-child(2) {
background: red;
}
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
두 번째와 세 번째 p는 부모의 두 번째 자식이기 때문에 빨간색 배경이 표시 second p됩니다 (div third p의 두 번째 자식이고 body 요소의 두 번째 자식 임).
따라서 스타일을 전달하려면 toolbox-icon div다음을 수행해야합니다.
.toolbox-button {
.toolbox-icon {
background-color: $hangupColor;
border: 1px solid $hangupColor;
width: 40px;
height: 40px;
&:hover {
background-color: $hangupColor;
}
svg {
fill: #fff;
}
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다