反应指定内联样式答案

【问题标题】：React specifying inline styles反应指定内联样式
【发布时间】：2019-03-31 15:51:51
【问题描述】：

我正在尝试以这种方式为我的反应组件指定内联样式：

var style = {
    border-left: 1px solid #222,
    color: #FFFF,
    float: 'right',
    font-size: 14px
}

<div id="myDiv" style={style}> </div>

我的 linter 不断向我抛出一个错误，提示我在第 3 行出现意外标记 - 即左边框：1px solid #222。

我做错了什么？或者如何设置样式？

谢谢

【问题讨论】：

你确定这不是因为#FFFF 中的 4 Fs 吗？试试#FFF
我不这么认为。

标签： html css reactjs

【解决方案1】：

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

您这里似乎有多个错误：

首先，标记的行是错误的，因为border-left应该是borderLeft
我相信1px solid #222 应该用引号引起来，每个属性值也应该用引号引起来，即颜色、字体大小
font-size，和border-left一样应该是fontSize
如果您使用 ES6，您可能还想使用 const 而不是 var

参考这里：https://facebook.github.io/react/tips/inline-styles.html

【讨论】：

【解决方案2】：

当您将对象传递给 HTML 元素的样式属性时，键应具有大写驼峰式，值必须具有对象中的字符串类型。例如：-

var myStyle = {
    borderLeft: '1px solid #222',
    color: '#FFFF',
    float: 'right',
    fontSize: '14px'
}
<div id="myDiv" style={myStyle}></div>

【讨论】：

click here to more...