如果你的前端用的是 React 框架,那么你或许会遇到,在jsx页面里写css内联样式,比如:
<div style={{backgroundColor:"red"}}>前端人人,feeo-css2obj</div>
它是一个样式对象,其中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)