title: How to add a class to the called component?
body: <p>I don't know how to add a class to the header component, which I'm calling from another page. I wanted to know how I add that change class, how it looks here</p>
  <pre><code>const [change, setChange] = useState(&quot;change&quot;);
  
  const listenScrollEvent = (e) =&gt; {
    if (window.scrollY &lt; 400) {
      return setChange(&quot;change&quot;);
    } else if (window.scrollY &gt; 400) {
      return setChange(&quot;changeColor&quot;);
    }
  };
  
  useEffect(() =&gt; {
    window.addEventListener(&quot;scroll&quot;, listenScrollEvent);
  
    return () =&gt; {
      window.removeEventListener(&quot;scroll&quot;, listenScrollEvent);
    };
  }, []);
  
  return &lt;Header className={change} /&gt;;
  </code></pre>
  <p>Header Code:</p>
  <pre><code>export default function Header() {
    return (
      &lt;header className=&quot;container header&quot;&gt;
        &lt;Logo /&gt;
        &lt;Navbar /&gt;
      &lt;/header&gt;
    );
  }
  </code></pre>