React使用带横线命名的inline CSS触发解析错误该如何解决？

你遇到的报错是因为JS对象语法中，未加引号的键名不能包含横线，{background-color:blue}会被解析器识别为background 减 color的运算表达式，不符合对象语法规则，因此找不到匹配的}闭合符抛出TS1005错误，同时颜色值blue作为字符串常量需要用引号包裹。

有两种正确的实现方式：

• 优先使用React官方推荐的驼峰命名法：所有带横线的CSS属性都可以转换为小驼峰格式直接使用

  <div style={{backgroundColor: 'blue'}}/>
  

• 保留原始横线属性名，将属性名用引号包裹为字符串键即可

  <div style={{'background-color': 'blue'}}/>
  

内容的提问来源于stack exchange，提问作者samuelnihoul