如何更改元素的父元素的样式 <NavLink> 在React.js中标记？

Question

I want to change the list-items' background-color property, when the chosen NavLink is active. From the docs I learned, that for adding an additional class to a NavLink , when it is active, I can use activeClassName prop, for making what I want, I need a parent selector in css, which don't exist.

How to choose the parent element of the NavLink tag, when it has an active class ?

I need the green background only on the list-item with an active child NavLink.

 <ul className="navbar-nav"> <li className="navItem"> <NavLink className="navlink text-dark" activeStyle={{color: "#fff !important"}} to="/" exact>about</NavLink> </li> <li className="navItem"> <NavLink className="navlink text-dark" activeStyle={{color: "#fff !important"}} to="/services">services</NavLink> </li> <li className="navItem"> <NavLink className="navlink text-dark" activeStyle={{color: "#fff !important"}} to="/contacts">contacts</NavLink> </li> </ul> 

Answer 1

The most straight forward way would probably be to apply a state to your parent element to achieve this effect, which ie could represent the name of a CSS class for your parent. You can change this state depending on the active route or the clicked item to apply a new CSS class.

See working example here

Your parent class could look like this:

import React from 'react'
import NavLink from './NavLink'

class Navbar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      navbarClass: "navbar"
    }
  }

  setBgClass (title) {
    this.setState({
      navbarClass: `navbar navbar-${title}`
    })  
  }

  render() {
    return (
      <div className={this.state.navbarClass}>

        <NavLink 
          className="nav-item" 
          onClick={() => this.setBgClass('about')} 
          href='/about/'>
            About
        </button>

        <NavLink 
          className="nav-item" 
          onClick={() => this.setBgClass('services')} 
          href='/services/'>
            Services
        </button>

        <NavLink 
          className="nav-item" 
          onClick={() => this.setBgClass('contact')} 
          href='/contact/'>
            Contact
        </button>

    </div>
    );
  }
}

export default Navbar

After that you only have to define appropriate CSS classes in your components stylesheet:

.navbar-about { background: green; }
.navbar-services { background: blue; }
.navbar-contact { background: orange; }

NOTE: If you call actual routes within your application ie using react-router , you may want to change the state of your parent navbar depending on your active route on componentDidMount instead of onClick , since the component may remount when the route changes.