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

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

<div style={{backgroundColor:"red"}}>前端人人,feeo-css2obj</div>

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

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

    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",

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

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

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

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

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

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

限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情

站长微信:Jiucxh