如何以字符串而非对象格式编写内联CSS？求可行方案或VSCode插件

React的内联style属性只接受对象格式，你写的<div style={"color:red;font-weight:bold"}> Hello there </div>是直接传入字符串，不符合React的规范，所以不会生效。正确的写法是将样式拆为驼峰式键名的对象：

<div style={{ color: 'red', fontWeight: 'bold' }}> Hello there </div>

解决浏览器CSS复制转格式的繁琐问题 #

如果你习惯从浏览器调试面板复制现成的CSS字符串，不想手动转换为对象格式，推荐用VSCode插件自动处理：

• CSS to JS：选中复制的CSS代码（比如color:red;font-weight:bold;），右键选择「Convert CSS to JS Object」，就能直接得到React可用的style对象，也能通过快捷键快速触发，完全省去手动转换的麻烦。
• JS CSS Convert：支持CSS字符串和React style对象的双向转换，操作简单，适配多种场景。

另外，如果你的项目使用了CSS-in-JS库（比如styled-components），可以直接编写原生CSS字符串，但原生React内联style仅支持对象格式，上述插件能帮你高效解决转换问题。

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