如何在排序时设置反应表标题的样式

Question

Is there any way to change the background color selected header in react-table . for example: below image, if I click on ID the id should change the background color to red.

I tried all the possibilities to change the background color on selection.

css

.ReactTable .rt-th  {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 7px 5px;
    overflow: hidden;
    transition: 0.3s ease;
    transition-property: width, min-width, padding, opacity;
    background: green;
  }

Answer 1

渲染组件时如何设置激活状态并检查条件？

Answer 2

I agree with the above about using state to toggle the className. Below is the javascript, css and html that I would use in a bare bones example. The isActive property is set to false and then toggles the value with the handleClick method.

class Application extends React.Component {

constructor (props) {
super (props);
    this.state = { isActive:false }
this.handleClick = this.handleClick.bind(this);
}

handleClick () {
this.state.isActive ? this.setState({ isActive: false }) : this.setState({ 
isActive: true })
}

render() {
return <div>
  <div onClick={this.handleClick} className = { this.state.isActive ? "red" : "green"} > Background Color </div>
</div>;
}}

React.render(<Application />, document.getElementById('app'));

The css is rather straight forward.

.red 
background-color: red 

.green 
background-color: green

And html

<div id="app"></app>