在 React 中從子元件自訂父樣式

在某些情況下，子元件可能需要自訂其父元素的樣式。您可以使用參考來實現它。 ref 只是 React 中的函數，可讓您在附加到 DOM 時存取 DOM 元素。

要注意的是，透過標準 CSS 無法直接從子元件修改父元件的樣式。雖然 :has() CSS 選擇器可以根據子元件有條件地設定父元件的樣式，但它仍然必須從父元件本身應用，而不是子元件。

---

這是一個子元件從其父元素中刪除填充的實際範例：

const Child = () =>; {
  返回 （
    <div ref="{(childElement)">; {
        if (子元素) {
          childElement.parentElement!.style.padding = "0"; // 移除父級的內邊距
        }
      }}
    >
      我就是孩子
    </div>
  ）；
};

const 父級 = () => {
  返回 （
    <div>




<hr>

<h3>
  
  
  這是如何運作的？
</h3>

<ol>
<li>
<p><strong>什麼是ref？ </strong></p>

<ul>
<li>
ref 是一個 React prop，可讓您在掛載（新增至 DOM）後存取 DOM 元素。 </li>
</ul>
</li>
<li>
<p><strong>什麼時候運行？ </strong></p>

<ul>
<li>ref 函數在附加 DOM 元素時運行。 </li>
</ul>
</li>
</ol>


<hr>

<p>這種方法速度很快，適用於需要從子元件對父樣式進行細微調整的特定用例。 </p>


          </div>

            
        

以上是在 React 中從子元件自訂父樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！