React의 하위 구성요소에서 상위 스타일 사용자 정의

하위 구성 요소가 상위 요소의 스타일을 맞춤설정해야 하는 시나리오가 있을 수 있습니다. 심판을 사용하여 이를 달성할 수 있습니다. ref는 단순히 DOM에 연결된 DOM 요소에 액세스할 수 있게 해주는 React의 함수입니다.

표준 CSS를 통해서는 하위 구성 요소의 상위 구성 요소 스타일을 직접 수정할 수 없다는 점에 유의하는 것이 중요합니다. :has() CSS 선택기는 하위 요소를 기반으로 상위 요소의 스타일을 조건부로 지정할 수 있지만 하위 요소가 아닌 상위 구성요소 자체에서 적용되어야 합니다.

---

다음은 하위 구성 요소가 상위 요소에서 패딩을 제거하는 실제 예입니다.

const Child = () => {
  반품 (
    <div
      ref={(childElement) => {
        if (childElement) {
          childElement.parentElement!.style.padding = "0"; // 부모로부터 패딩을 제거합니다.
        }
      }}
    >
      나는 그 아이이다
    </div>
  );
};

const 부모 = () => {
  반품 (
    <div>




<hr>

<h3>
  
  
  어떻게 작동하나요?
</h3>

<ol>
<li>
<p><strong>ref란 무엇인가요?</strong></p>

<ul>
<li>
ref는 DOM 요소가 마운트된 후(DOM에 추가된) DOM 요소에 액세스할 수 있게 해주는 React prop입니다.</li>
</ul>
</li>
<li>
<p><strong>언제 실행되나요?</strong></p>

<ul>
<li>ref 함수는 DOM 요소가 첨부되었을 때 실행됩니다.</li>
</ul>
</li>
</ol>


<hr>

<p>이 접근 방식은 신속하며 하위 구성 요소에서 상위 스타일을 약간 조정해야 하는 특정 사용 사례에 적합합니다.</p>


          

            
        

위 내용은 React의 하위 구성요소에서 상위 스타일 사용자 정의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!