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-left使用marginLeft。

<强>原因：

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

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

检查DOC。

Answer 2

style={{width:150px,height:150px,margin-left:370px}}

试试这个

Answer 3

这也可以这样做 -

const divStyle = {
  display:'block'
};

const imgStyle = {
  width:150,
  height:150,
  marginleft:370
};

<div id="loadingDiv" style= {divStyle}>
    <img src={Loading} style= {imgStyle} />
</div>

反应组件中的内联CSS问题

3 个答案: