css - React 组件中的内联 CSS 问题

Question

我有一个 react 组件，我正在尝试使用 margin-left 属性对齐下面的 div 。我收到控制台错误:

Unexpected token

指向 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-left，而是使用 marginLeft。

原因:

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

检查DOC .