反应组件中的内联 CSS 问题答案

【问题标题】：Inline CSS issues in react component反应组件中的内联 CSS 问题
【发布时间】：2017-04-21 05:09:58
【问题描述】：

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

意外的令牌

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

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

【问题讨论】：

标签： css reactjs

【解决方案1】：

这样写：

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

不要使用margin-left，而是使用marginLeft。

原因：

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

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

检查DOC。

【讨论】：

价值观呢？例如。 max-width: 'max-content' 会变成 maxWidth: 'max-content' 还是 maxWidth: 'maxContent' ？
@Paulo 在这种情况下，属性值没有变化，只是像maxWidth: 'max-content'这样改变名称。

【解决方案2】：

这样也可以——

const divStyle = {
  display:'block'
};

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

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

【讨论】：