最近在学习react,然后遇到react中css该怎么写这个问题,上知乎上看了好多大牛都说styled-components好用是大势所趋。

但我自己用了感觉体验却很差,我在这里说说我为啥觉得styled-components不好用。

1.既然用了styled-components,那除了引用全局的css,还要引用组件的css吗?如果用了,干嘛不把组件的样式全部写到组件的css文件中呢?

好吧,如果不引用css,全靠styled-components来写的话,我给大家看一下代码

    render() {
return (
<HeaderWrap>
<HeaderContainer>
<LogoArea>
<h1>Mask的弹幕网站</h1>
<p style={{fontSize:30+"px",marginTop:10+"px"}}><LogoArrow></LogoArrow>记录生活,不忘初心</p>
</LogoArea>
<LoginPanel>
<p onclick={this.showLoginBox}>登录</p>
<p onclick={this.showRegisterBox}>注册</p>
</LoginPanel>
<UserPanel>
<UserFigure>
<p><UserIcon src={this.props.userIconUrl} alt="user-figure"/></p>
<p>{this.props.userName}</p>
</UserFigure>
<UserMenu>
<UserOption>投稿</UserOption>
<UserOption>空间</UserOption>
<UserOption>注销</UserOption>
</UserMenu>
</UserPanel>
</HeaderContainer>
</HeaderWrap>
);
}

上面的代码是我写的网页的一个header的代码,我是想把它封装成组件的。但是sass里面的嵌套的写法也不好使了,明明一个嵌套就搞定的事情,反而要定义两个组件。可以看到几乎所有容器都被用styled-components来定义了,styled-components的原理就是创建一个react里的component,但实际上有些容器所对应的样式可能就1、2条,也要调用构造函数创建对象,我是觉得这样很浪费资源,工作量也上升了。

2.styled-components写完之后你不知道html元素是啥,ok,上面的例子你知道每个标签对应html什么元素吗?你不知道。可读性很差

3.在js里写css没有自动补全,样式是在js里的标签模板里写的,所以没有自动补全。可能可以设置吧,但我不会,写css没有补全真的累。。

4.生成的html可读性也很差

这是生成的html文档,可以看到每定义一个styled-component就会随机生成一个class来绑定你定义的样式,你看这些class根本不知道绑定的样式是什么作用,自己写css的时候还是有一些语义上的定义的,比如clearfix

我就用了2天就感觉难受的不行,看了http://www.sohu.com/a/153351371_463987这篇文章,感觉很有共鸣,反正我是觉得styled-components真的不好用,大家看自己的个人喜好吧

styled-components真的好吗?的更多相关文章

  1. styled components草根中文版文档

    1.styled components官网网址 https://www.styled-components.com/docs   以组件的形式来写样式. 1.1安装 yarn add styled-c ...

  2. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  3. 大前端的自动化工厂(2)—— SB Family

    原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写 ...

  4. 全面系统讲解CSS工作应用+面试一步搞定

    [TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...

  5. 使用styled-components实现CSS in JS

    前面的话 使用jsx语法可以实现HTML in JS,使用svgr可以实现svg in JS,使用styled-components可以实现CSS in JS.这样,使用react开发,就变成了使用J ...

  6. Next.js v4.1.4 文档中文翻译【转载】

    最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...

  7. CSS Overrides: Friend or Foe?

    转自:http://www.callumhart.com/blog/css-overrides-friend-or-foe Anyone familiar with CSS will know how ...

  8. 9 CSS in JS Libraries You Should Know in 2018

    转自:https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b 实际上  wix 的 styl ...

  9. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  10. The Road to learn React书籍学习笔记(第一章)

    react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...

随机推荐

  1. 复利计算C转java版

    import java.util.Scanner; public class Compound_int { public static void main(String[] args) { tip() ...

  2. "数学口袋精灵"bug

    首先要部署这个app项目就是第一步: 一.前提下载并安装JDK 在线图解:手把手教你安装JDK      http://www.lvtao.net/server/windows-setup-jdk.h ...

  3. 2nd 本周例行报告

    每周例行报告 1.个人项目:词频统计更新 C类型 C内容 S开始时间 E结束时间 I间隔(min) T净时间(min) 分析 功能分析 8:30 10:00 20 70 学习 查阅资料 10:00 1 ...

  4. C++11 锁 lock

    转自:https://www.cnblogs.com/diegodu/p/7099300.html 互斥(Mutex: Mutual Exclusion) 下面的代码中两个线程连续的往int_set中 ...

  5. node.js入门(一)

    NodeJS是一个使用了Google高性能V8引擎的服务器端JavaScript实现.它提供了一个(几乎)完全非阻塞I/O栈,与JavaScript提供的闭包和匿名函数相结合,使之成为编写高吞吐 量网 ...

  6. (转)Nginx图片服务器

    本文转至博客http://wenxin2009.iteye.com/blog/2117079 Nginx搭建图片服务器 Nginx下载地址:http://nginx.org/en/download.h ...

  7. [HNOI2002]跳蚤 【容斥】

    题目描述 Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有N+1个自然数.其中最 ...

  8. 【Python3的进制扫盲】

    一.进制 1.进制简介 进制就是进位制,是人们规定的一种进位方法.计算机底层的数据运算和存储都是二进制数据.计算机语言就是二进制,计算机能直接识别二进制数据,其它数据都不能直接识别. 2.常用进制 对 ...

  9. 用dtree实现树形菜单 dtree使用说明

    http://www.jb51.net/article/28566.htm 准备工作: 请从脚本之家http://www.jb51.net/jiaoben/31974.html下载dtree.zip文 ...

  10. 洛谷P2398 GCD SUM

    题目描述 for i=1 to n for j=1 to n sum+=gcd(i,j) 给出n求sum. gcd(x,y)表示x,y的最大公约数. 输入输出格式 输入格式: n 输出格式: sum ...