首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决痛苦!!!React css行内样式转jsx样式对象

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

作者头像
前端人人
发布2020-05-07 10:24:33
1.8K0
发布2020-05-07 10:24:33
举报
文章被收录于专栏:前端人人前端人人

如果你的前端用的是 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)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-05-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端人人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档