有什么办法可以改变在react-table中选择的标题的背景颜色吗? . 例如:下图,如果我点击 ID,id 应该将背景颜色更改为红色。
我尝试了所有改变选择背景颜色的可能性。
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;
}
最佳答案
我同意上面关于使用状态来切换类名的说法。下面是我将在一个简单的示例中使用的 javascript、css 和 html。 isActive 属性设置为 false,然后使用 handleClick 方法切换值。
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'));
CSS 相当简单。
.red
background-color: red
.green
background-color: green
和html
<div id="app"></app>
关于javascript - 如何在排序时设置 react 表标题的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52865553/