How to change All Styles in Navbar after actions

It's my component. It's work pretty well, but.

I have problem with Styling. After scroll, the navbar setState and add NavbarScroll to Navbar. How can I style all subtree elements from this component. I need to change, every elements & components from Menu Component:

• all Link (a) and hovers
• Logo path img

• buttons

  export class Navbar extends Component{
      constructor(props){
          super(props);
          this.handleScroll = this.handleScroll.bind(this);
          this.state={Navbar: 'Navbar'}
        }
  
          componentDidMount() {
            window.addEventListener('scroll', this.handleScroll);
          };
  
          handleScroll() {
              let Navbar = this.state.Navbar
               this.setState( {Navbar : 'Navbar ' + 'NavbarScroll' } )
       };
  
  
      render(){
          return(
  
              <div onScroll={this.handleScroll.bind(this)} className ={this.state.Navbar}>
                  <Container>
                      <Row>
                          <Col sm={{size:3,}}>Logo</Col>
                          <Col><Menu/></Col>
                      </Row>
                  </Container>
              </div>
  
          )
      }
  }
  

Pass state to Menu like this:

<Menu navbarState={this.state.Navbar} />

Then in Menu component say for a button do:

<button className={props.navbarState} /> 

This adds apropriate class to so you can use it further in your css:

button.Navbar {
   styles for normal navbar
}

button.Navbar.NavbarScroll {
   styles for scrolled navbar
}

This example works if your Menu is uncontrolled Component initiated as

const Menu = (props) => {
} 

if it is a class like

class Menu extends React.Component

then you should add this before props:

<button className={this.props.navbarState} />