Inline CSS issues in react component

Question

I have a react component and I'm trying to align the below div using margin-left property. I'm getting a console error:

Unexpected token

pointing towards the hyphen in the margin left property. Can anyone help to resolve this?

<div id="loadingDiv" style = {{display:'block'}}>
    <img src={Loading} style = {{width:150,height:150,margin-left:370}} />
</div>

Answer 1

Write it like this:

style = {{ width : 150, height : 150, marginLeft : 370 }}

Instead of using margin-left use marginLeft.

Reason:

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

margin-left      -->   marginLeft 
padding-top      -->   paddingTop 
background-color -->   backgroundColor

Check the DOC.