title: Apply inline style to an element in React from a child element
body: <p>I am still very new to React and I am trying to recreate a navigation bar that was originaly made with HTML, CSS and JS.</p>
  <p>I have a <code>Layout</code> component and a <code>Navbar</code> component. In the <code>Navbar</code> component I have a button that when clicked should apply an inline style or a CSS class to the <code>&lt;main&gt;{children}&lt;/main&gt;</code> element in the <code>Layout</code> component.</p>
  <p>The <code>Navbar</code> element is used inside the <code>Layout</code> element, so I am wondering if this is even possible?</p>
  <p>layout.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;
  import { useStaticQuery, graphql} from &quot;gatsby&quot;
  import Navbar from &quot;./navbar&quot;
  
  const Layout = ({ location, title, children }) =&gt; {
    const data = useStaticQuery(graphql`
      {
        site {
          siteMetadata {
            menuLinks {
              link
              name
            }
          }
        }
      }
    `)
    return (
      &lt;div&gt;
        &lt;Navbar pages={ data.site.siteMetadata.menuLinks } /&gt;
        &lt;main&gt;{children}&lt;/main&gt;
      &lt;/div&gt;
    )
  }
  
  export default Layout
  </code></pre>
  <p>navbar.js</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;
  import { Link } from &quot;gatsby&quot;
  import styles from &quot;./styling/navbar.module.less&quot;
  
  const Navbar = ( props ) =&gt; {
  
    const [navbarState, setNavbarState] = useState(false);
  
    let toggleNavbar = () =&gt; {
      console.log(&quot;Navbar toggle - Activated&quot;)
      
      setNavbarState((navbarState) =&gt; !navbarState)
  
    }
  
    window.addEventListener('resize', windowResized)
      
    return (
      &lt;nav id={&quot;navigation-bar&quot;}&gt;
        &lt;div className={`${styles.navLinks} ${navbarState? styles.navActive:&quot;&quot;}`}&gt;
          {props.pages.map((page, index) =&gt; (
            &lt;Link key={page.name} className={`${styles.navLink} ${styles.navLinkHoverEffect} ${navbarState? styles.navAnimate:&quot;&quot;}`} 
            style={{animationDelay: `${index / 7 + 0.5}s`}} to={page.link}&gt;
                {page.name}
            &lt;/Link&gt;
          ))}
        &lt;/div&gt;
        &lt;div className={`${styles.burger} ${navbarState? styles.toggle:&quot;&quot;}`} onClick={toggleNavbar}&gt;
          &lt;div className={styles.line1}&gt;&lt;/div&gt;
          &lt;div className={styles.line2}&gt;&lt;/div&gt;
          &lt;div className={styles.line3}&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    )
  }
  
  export default Navbar
  </code></pre>