React で子コンポーネントから親スタイルをカスタマイズする

子コンポーネントが親要素のスタイルをカスタマイズする必要があるシナリオが考えられます。 ref を使用してこれを達成できます。 ref は、DOM にアタッチされたときに DOM 要素にアクセスできるようにする React の関数です。

標準の CSS では、子コンポーネントから親コンポーネントのスタイルを直接変更することはできないことに注意することが重要です。 :has() CSS セレクターは、子に基づいて親を条件付きでスタイル設定できますが、子ではなく親コンポーネント自体から適用する必要があります。

---

これは、子コンポーネントが親要素からパディングを削除する実際の例です:

const Child = () => {
  戻る （
    <div ref="{(子要素)"> {
        if (子要素) {
          childElement.parentElement!.style.padding = "0"; // 親からパディングを削除します
        }
      }}
    >
      私はその子です
    </div>
  );
};

const 親 = () => {
  戻る （
    <div>




<hr>

<h3>
  
  
  これはどのように作動しますか？
</h3>

<ol>
<li>
<p><strong>ref とは何ですか?</strong></p>

<ul>
<li>
ref は、マウントされた (DOM に追加された) DOM 要素にアクセスできるようにする React prop です。</li>
</ul>
</li>
<li>
<p><strong>いつ実行されますか?</strong></p>

<ul>
<li>DOM 要素がアタッチされると、ref 関数が実行されます。</li>
</ul>
</li>
</ol>


<hr>

<p>このアプローチは迅速であり、子コンポーネントから親スタイルに微調整を加える必要がある特定の使用例に適しています。</p>


          </div>

            
        

以上がReact で子コンポーネントから親スタイルをカスタマイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。