CODEWITHSUNDEEP
javascripthtmlcssreactjs
David
David

Reputation: 4281

How to give inline css in reacts class component

How to give inline css in reacts class component.

I have a css something like this.

{
    font-size: 17px;        
  
font-family: Segoe UI Semibold;
    color: #565656;
    text-shadow: 0 1px 1px white;
}

Now when I am reading this css from the css file this is working fine but my css class is coming from library so writing there is not accessible. So How can I make it inline.

Working

 <div style= {{border :"1px solid #ced4da", overflow : "auto",height : "300px"}}>

Not working

<div style= {{font-size: 17px, font-family: Segoe UI Semibold, color: #565656 ,text-shadow: 0 1px 1px white;}}>

Inline css only apply as camel case so how to over come with this. What is an alternate for this.

Upvotes: 0

Views: 116

Answers (1)

Vihaanverma27
Vihaanverma27

Reputation: 61

You cannot add hyphens in inline-css so you need to change the div element to

<div style= {{fontSize: "17px", fontFamily: "Segoe UI Semibold", color: "#565656" ,textShadow: "0 1px 1px white"}}>

Upvotes: 1

Related Questions