Customizing Parent Style from a Child Component in React

There might be scenarios where a child component needs to customize the style of its parent element. You can achieve it using a ref. A ref is simply a function in React that allows you to access a DOM element when it is attached to the DOM.

It's important to note that directly modifying the style of a parent component from a child is not possible through standard CSS. While the :has() CSS selector can conditionally style a parent based on a child, it must still be applied from the parent component itself, not the child.

---

Here’s a practical example where a child component removes padding from its parent element:

const Child = () => {
  return (
    <div ref="{(childElement)"> {
        if (childElement) {
          childElement.parentElement!.style.padding = "0"; // Remove padding from the parent
        }
      }}
    >
      I am the child
    </div>
  );
};

const Parent = () => {
  return (
    <div>




<hr>

<h3>
  
  
  How Does This Work?
</h3>

<ol>
<li>
<p><strong>What is ref?</strong></p>

<ul>
<li>
ref is a React prop that allows you to access a DOM element after it is mounted (added to the DOM).</li>
</ul>
</li>
<li>
<p><strong>When Does It Run?</strong></p>

<ul>
<li>The ref function runs when the DOM element is attached.</li>
</ul>
</li>
</ol>


<hr>

<p>This approach is quick and works for specific use cases where you need to make minor adjustments to parent styles from a child component.</p>


          </div>

            
        

The above is the detailed content of Customizing Parent Style from a Child Component in React. For more information, please follow other related articles on the PHP Chinese website!