How to add multiple line css object in one style tag react?

Question

Here I want to use two style in one line css. but i got error how i add two style object in style tag reactjs. here is my code:

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>

so what should i do add two style object in one line. here i am using ternary operator. if my condition is true then print true part. can anyone tell me how i add two style object. help will be appreciated. thank you

your effort is apreciated. but i want to write this in one style tag look at this {this.state.color_black ? style: highlightStyle (I GOT ERROR HERE),this.state.hover ? hoverStyle: ''} ............ here i am using two ternary operator. — stackoverhelp
– stackoverhelp, Commented Feb 5, 2018 at 11:11

Jayavel · Accepted Answer · 2018-02-05 12:25:54Z

1

change on applying styles :

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

Working demo below :

working demo

answered Feb 5, 2018 at 12:25

Jayavel

3,4072 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

illiteratewriter · Accepted Answer · 2018-02-05 11:50:25Z

1

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

This would display both styles from highlightStyle and hoverStyle.

The ... operator is called spread operator in es6. More on spread

answered Feb 5, 2018 at 11:50

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

Comments

Rodius · Accepted Answer · 2018-02-05 11:12:56Z

0

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

answered Feb 5, 2018 at 11:12

Rodius

2,32117 silver badges20 bronze badges

1 Comment

stackoverhelp Over a year ago

no no dont change my code actually this.state.colorblack is operator and this.state.hover both are ddifferent. so tell i i add two ternary operator in one style tag react

Collectives™ on Stack Overflow

How to add multiple line css object in one style tag react?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related