如何在一个样式标签中添加多行css对象做出反应？

Question

这里我想在一行css中使用两种风格。但我得到错误我如何在样式标签reactjs中添加两个样式对象。  这是我的代码：

const style = {
    color:"black",
    fontSize:16,
    borderRadius:4,
    border: "1px solid grey",
    lineHeight: "28px",
    background: "white",
    padding: 3,
    margin:3
  }
  const hoverStyle = {
    color:"black",
    fontSize:16,
    borderRadius:4,
    border: "1px solid grey",
    lineHeight: "28px",
    background: "yellow",
    padding: 3,
    margin:3
  }
const highlightStyle = {
    color:"black",
    fontSize:16,
    border: "1px solid grey",
    background:"lightblue",
    borderRadius:4,
    lineHeight: "25px",
    padding: 3,
    margin:5
  }

 onHover(){ 
        console.log("mouse enter")  
        // this.setState({hover:!this.state.hover})       
    }
 
 
 <span id={this.props.atId} className = {this.props.classword}
  style={this.state.color_black ? style: highlightStyle,this.state.hover ? hoverStyle: ''}
  onClick={this.changeColor}
  onMouseEnter={() => {this.onHover()}}
  onMouseLeave={() => {this.onUnHover()}}
  //
>
  {item}
</span>

 那么我该怎么做才能在一行中添加两个样式对象。 在这里我使用三元运算符。如果我的条件是真的那么打印真实的部分。 任何人都可以告诉我如何添加两个样式对象。 帮助将不胜感激。 谢谢

Answer 1

style={{...highlightStyle , ...hoverStyle}}

这将显示highlightStyle和hoverStyle的两种样式。

...运算符在es6中称为扩展运算符。 More on spread

Answer 2

更改申请样式：

style={Object.assign({},
        this.state.color_black ? style : highlightStyle,
        this.state.hover && hoverStyle)}
        onMouseOver={this.hoverOn}
        onMouseLeave={this.hoverOff}

下面的工作演示：

working demo

Answer 3

style={this.state.color_black ? highlightStyle : (this.state.hover ? hoverStyle: '')}