参考：

　　http://www.alloyteam.com/2017/05/guide-styled-components/　　

　　https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8

　　https://juejin.im/entry/59473d2fda2f6000678468cb

　　http://web.jobbole.com/91506/

使用方式主要是 模板字符串 和 标签模板（函数的独特调用形式）。

使用标签模板，会返回一个React组件，可以在定义的时候通过props获取到外部传递进来的数据；

组件生成的元素上会被自动加上一个随机的类名，以达到不冲突的目的。

使用这种组件有利于逻辑与样式的分离（分离成逻辑组件和展示组件，展示组件内部使用style-components）

css module是js和css分离的写法

styled-components是在js中写css，这种css in js模式是新一代react组件样式解决方案，可以在js中写条件判断，使用的时候更加简洁和语义化，对比以下两种方式：

<TinyBitLongerStyleName></TinyBitLongerStyleName>

<div className={styles.longerStyleName}></div>

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. 使用styled-components实现CSS in JS

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

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

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

  6. CSS Overrides: Friend or Foe?

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

  7. 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 ...

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

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

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

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

  10. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

随机推荐

  1. Android 兼容包

    http://www.cnblogs.com/kissazi2/p/3644848.html 在AndoridManifest.xml文件中可以查看项目最低支持的SDK版本 <uses-sdk ...

  2. line-height与图文对齐 笔记

    基本概念: 块:block 特点独行 内联:inline 内联块:inline-block 如果元素display属性默认值为block,则为块元素.如div p 如果元素display属性默认值为i ...

  3. Git - .gitignore怎么忽略已经被版本控制的文件

    问题 如果某个文件已经存在于远程仓库了,也就是说某个文件已经被版本控制了,如果将该文件添加到.gitignore中,是无法生效的.因为.gitignore是用来控制尚未被纳入版本控制的文件,如果文件已 ...

  4. js动态实现文本框不可编辑状态

    两种方法: $("#id").attr("readOnly",false); 不可编辑,可以传值 $("#id").attr("d ...

  5. java小游戏——猜数字

    import java.util.ArrayList; import java.util.List; import java.util.Random; public class Num01 { sta ...

  6. 消息队列介绍、RabbitMQ&Redis的重点介绍与简单应用

    消息队列介绍.RabbitMQ&Redis的重点介绍与简单应用 消息队列介绍.RabbitMQ.Redis 一.什么是消息队列 这个概念我们百度Google能查到一大堆文章,所以我就通俗的讲下 ...

  7. CF #546div2D

    题目本质:只有能做到一路过关斩将的勇者才能冒泡过来救出女主. 主要代码: ; int n, m, a[maxn], ans; vector<int> edge[maxn]; set< ...

  8. Hungary Algorithm国外板子

    Codeforces 1107一题除了dp做法还有二分带权匹配O(n^3)做法,国外网友的板子时间非常优秀,但矩阵设定的事情并不是很懂-- //Codeforces 1107F const int m ...

  9. 2016级萌新选拔赛BE题

    #include<bits/stdc++.h> using namespace std; #define ll long long ll a[]; ll d[]; int main() { ...

  10. MFC中的模态对话框与非模态对话框

    模态对话框创建: MyDialog mydlg; mydlg.DoModal() 当前只能运行此模态对话框,且停止主窗口的运行,直到模态对话框退出,才允许主窗口运行. 模态对话框的关闭顺序: OnCl ...