Question

我试图以这种方式为反应组件指定内联样式：

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。

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

由于

Answer 1

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

这里似乎有多处错误：

首先，标记的行是错误的，因为border-left应为borderLeft
1px solid #222应该在引号中我相信，每个属性值都应该是，即颜色，字体大小
font-size，与border-left相同，应为fontSize
如果您使用ES6

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

Answer 2

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

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

React指定内联样式

2 个答案: