Using multiple Style attributes inside react

Question

<div className="col-md-9">
           <span style={{color:this.props.todo.done ?'#e6e6e6' : '#4d4d4d'},
                        {textDecoration: this.props.todo.done ? '#e6e6e6 line-through' : 'none'}
                    }
           >
               {this.props.todo.value}
           </span>
</div>

I know the above one is wrong, but is there anyway to add multiple style attributes inside the span tag and make it work. As you can see I want both of them to work. Thank you

refer codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 — cdoshi
– cdoshi, Commented Aug 31, 2018 at 6:06
You can certainly add multiple styles - what error is your react outputting from your code? — Chris Cousins
– Chris Cousins, Commented Aug 31, 2018 at 6:07
yeah I saw this before posting, but I didn't get a clear idea on implementing the above problem.. anyways thank you for your help — Gowtham Koushik
– Gowtham Koushik, Commented Aug 31, 2018 at 6:08
@ChrisCousins it is not showing any errors, the declaration which is given at last is working not the ones before that.. — Gowtham Koushik
– Gowtham Koushik, Commented Aug 31, 2018 at 6:09
Oh I see, you should only supply one object to the style prop and in it you can have multiple style key value pairs - you’re sending two separate style objects. — Chris Cousins
– Chris Cousins, Commented Aug 31, 2018 at 6:11

Amruth · Accepted Answer · 2018-08-31 06:38:57Z

1

Still you can optimize code like this, so that your render method looks neat.

Create variable of style JSON object.

const customStyle = {
  color: this.props.todo.done ? "#e6e6e6" : "#4d4d4d",
  textDecoration: this.props.todo.done ? "#e6e6e6 line-through" : "none"
};

Pass customStyle object as props to style element.

<div className="col-md-9">
   <span style={customStyle}>{this.props.todo.value}</span>
</div>;

answered Aug 31, 2018 at 6:38

Amruth

5,9122 gold badges30 silver badges41 bronze badges

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

1 Comment

Gowtham Koushik Over a year ago

Thanks, definitely I will give it a try :)

Igor Alemasow · Accepted Answer · 2018-08-31 06:11:54Z

1

try this, i just removed redundant curly drackets

<div className="col-md-9">
       <span style={
                     {
                       color:this.props.todo.done ?'#e6e6e6' : '#4d4d4d',
                       textDecoration: this.props.todo.done ? '#e6e6e6 line-through' : 'none'
                     }
                }
       >
           {this.props.todo.value}
       </span>
</div>

answered Aug 31, 2018 at 6:11

Igor Alemasow

4,9592 gold badges32 silver badges28 bronze badges

Collectives™ on Stack Overflow

Using multiple Style attributes inside react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related