title: How to Change a css property based on a state of another component
body: <p>I'm building a web page with gatsby which is based in react, and I need my nav component changes his sticky position to relative or auto, every time that I open the modal of the gallery component..but I don't know how to approach and solve the problem. The nav component belongs to the layout component which is Gallery's parent component...Here are the components involved: </p>
  
  <p>nav component:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Location } from '@reach/router'
  import { Link } from 'gatsby'
  import { Menu, X } from 'react-feather'
  import Logo from './Logo'
  
  import './Nav.css'
  
  export class Navigation extends Component {
    state = {
      active: false,
      activeSubNav: false,
      currentPath: false
    }
  
    componentDidMount = () =&gt;
      this.setState({ currentPath: this.props.location.pathname })
  
    handleMenuToggle = () =&gt; this.setState({ active: !this.state.active })
  
    // Only close nav if it is open
    handleLinkClick = () =&gt; this.state.active &amp;&amp; this.handleMenuToggle()
  
    toggleSubNav = subNav =&gt;
      this.setState({
        activeSubNav: this.state.activeSubNav === subNav ? false : subNav
      })
  
    render() {
      const { active } = this.state,
      { subNav } = this.props,
        NavLink = ({ to, className, children, ...props }) =&gt; (
          &lt;Link
            to={to}
            className={`NavLink ${
              to === this.state.currentPath ? 'active' : ''
            } ${className}`}
            onClick={this.handleLinkClick}
            {...props}
          &gt;
            {children}
          &lt;/Link&gt;
        )
  
      return (
        &lt;nav className={`Nav ${active ? 'Nav-active' : ''}`}&gt;
  
          &lt;div className="Nav--Container container"&gt;
               &lt;Link to="/" onClick={this.handleLinkClick}&gt;
                  &lt;div style={{ width: `40px`, margin:`0 20px`}}&gt;
                     &lt;Logo /&gt;
                  &lt;/div&gt;
               &lt;/Link&gt;
  
            &lt;div className="Nav--Links"&gt;
            &lt;NavLink to="/"&gt;Home&lt;/NavLink&gt;
            &lt;NavLink to="/contact/"&gt;Contacto&lt;/NavLink&gt;
  
              &lt;div className={`Nav--Group ${this.state.activeSubNav === 'about' ? 'active' : '' }`} &gt; 
  
                   &lt;span className={`NavLink Nav--GroupParent ${
                     this.props.location.pathname.includes('about') ||
                     this.props.location.pathname.includes('team') ||
                     this.props.location.pathname.includes('news') 
                     ? 'active'
                      : ''
                   }`} 
                         onClick={() =&gt; this.toggleSubNav('about')}
                   &gt;
                       Nosotros
                   &lt;/span&gt;
                   &lt;div className="Nav--GroupLinks"&gt;
                      {subNav.map( (link, index)=&gt; (
                          &lt;NavLink 
                          to={link.link} 
                          key={'posts-subnav-link-' + index}
                          className="Nav--GroupLink"&gt;{link.name}&lt;/NavLink&gt;
                      ))}
                   &lt;/div&gt;
  
              &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;button
              className="Button-blank Nav--MenuButton"
              onClick={this.handleMenuToggle}
            &gt;
              {active ? &lt;X /&gt; : &lt;Menu /&gt;}
            &lt;/button&gt;
  
          &lt;/div&gt;
  
        &lt;/nav&gt;
      )
    }
  }
  
  export default ({ subNav }) =&gt; (
    &lt;Location&gt;{route =&gt; &lt;Navigation subNav={subNav} {...route} /&gt;}&lt;/Location&gt;
  )
  
  
  </code></pre>
  
  <p>the default position property is set to sticky in the nav.css file I want remove that and change it 
  dynamically depending of the modal gallery state, open or close.</p>
  
  <p>this is my gallery component: </p>
  
  <pre><code>import React, { useState, useCallback } from "react";
  import Gallery from "react-photo-gallery";
  import Carousel, { Modal, ModalGateway } from "react-images";
  
  const PhotoGallery = ({photos}) =&gt; {
    const [currentImage, setCurrentImage] = useState(0);
    const [viewerIsOpen, setViewerIsOpen] = useState(false);
  
    const openLightbox = useCallback((event, { photo, index }) =&gt; {
      setCurrentImage(index);
      setViewerIsOpen(true);
    }, []);
  
    const closeLightbox = () =&gt; {
      setCurrentImage(0);
      setViewerIsOpen(false);
    };
  
     return(
       &lt;div&gt;
           &lt;Gallery photos={photos} onClick={openLightbox} /&gt;
              &lt;ModalGateway&gt;
                  {viewerIsOpen ? (
                     &lt;Modal onClose={closeLightbox}&gt;
                     &lt;Carousel
                      currentIndex={currentImage}
                      views={photos.map(x =&gt; ({
                      ...x,
                      srcset: x.srcSet,
                      caption: x.title
                    }))}
              /&gt;
            &lt;/Modal&gt;
          ) : null}
        &lt;/ModalGateway&gt;
       &lt;/div&gt;
     )
  }
  
  export default PhotoGallery
  
  </code></pre>
  
  <p>the problem is that when the modal is open the nav still sticky and does not allow me access to the modal controls, like close and expand...and I need to change that.</p>