我正在尝试做以下工作的内联样式
<dt className='some-element' style={{backgroundColor : '#1a1a1a', fill: '#1a1a1a'}}>
现在我每次都尝试更改十六进制值，因此尝试拥有类似的东西
let styleConfig = `backgroundColor : '${someColor}', fill: '${someColor}'`
<dt className='some-element' style={{styleConfig}}>
但我没有看到样式被应用为第一个样式，也没有收到任何控制台错误。
有什么建议吗？
【问题讨论】：
React 组件的属性需要用引号括起来的字符串或花括号（对于其他值和变量）。
style={{backgroundColor : '#1a1a1a', fill: '#1a1a1a'}} 中的第一对花括号是属性值包装器，第二对是您作为值传递给属性的对象的一部分 - {backgroundColor : '#1a1a1a', fill: '#1a1a1a'}
由于ES6 shorthand property names，当您将变量styleConfig 传递到两对花括号style={{styleConfig}} 中时，这就是您实际得到的结果：
style={{ styleConfig: `backgroundColor : '${someColor}', fill: '${someColor}'` }}
此外，styleConfig 应该是一个对象，而不是一个字符串，因为 style 属性需要一个 object of style properties。
试试这个：
let styleConfig = { backgroundColor : 'red', fill: 'blue' } // create an object of style properties
<dt className='some-element' style={styleConfig}> // use a single pair of curly brackets
【讨论】：
styleConfig 对象。您实际上并不需要模板文字。使用字符串或包含字符串的变量作为颜色名称/值。