解决痛苦!!!React css行内样式转jsx样式对象

如果你的前端用的是 React 框架,那么你或许会遇到,在jsx页面里写css内联样式,比如:

前端人人,feeo-css2obj

它是一个样式对象,其中key 是驼峰的样式名。你一个一个写,当然没有问题,怕就怕,你在Chrome浏览器控制台里调好的样式,复制到jsx页面里的时候,要自己手动一个一个改,这可要老命了,比如:

这是你在chrome里调试好的样式:

background-color: red;font-size: 16px;color: #ffffff;border-bottom-color: #000000;border-bottom-width: 1px;border-bottom-style: solid;width: 100px;height: 100px;padding-top: 10px;margin-bottom: 10px;

你要复制到jsx页面里:

然后自己一个一个改成这样:

backgroundColor:"red",fontSize:"16px",color:"#ffffff",borderBottomColor:"#000000",borderBottomWidth:"1px",borderBottomStyle:"solid",width:"100px",height:"100px",paddingTop:"10px",marginBottom:"10px",

那么有没有办法一键转换呢? 适用vscode。

我一直被这个问题困扰,很烦,开发效率被拖慢,一个一个改实在痛苦,所以到处找解决办法,也找到一个,功能也不错,但还是不太好用,转换的时候,总带有{},所以自己动手开发了一款《feeo-css2obj》，专门用于 react css 行内样式转jsx 样式对象。

演示：(右键选择，也可以使用组合快捷键：Ctrl+Alt+C，记忆技巧，c 是 css)

如果你需要这个功能，请在公众号<前端人人>发私信给我吧。

如果你觉得哪里不好用,可以提意见给我,我会改善升级!!!

如果你在开发中还遇到一些类似的烦恼，也可以私信我。

禁止擅自转载,如需转载请在公众号<前端人人>中留言联系我们!

感谢童鞋们支持，希望对你有所帮助!

如果你有什么问题,可以在下方留言给我们!