React组件中的内联CSS问题

Question

我有一个react组件，我正在尝试div使用margin-left属性对齐以下内容。我收到一个console错误：

意外的标记

指向margin left属性中的连字符。谁能帮助解决这个问题？

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

Answer 1

像这样写：

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

而不是使用margin-leftuse marginLeft。

原因：

在React中，内联样式未指定为字符串。相反，它们使用一个对象指定，该对象的键是样式名称的驼峰式版本，其值是样式的值，通常是字符串。

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

检查DOC。