styled-components
参考:
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
使用方式主要是 模板字符串 和 标签模板(函数的独特调用形式)。
使用标签模板,会返回一个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的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- 大前端的自动化工厂(2)—— SB Family
原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写 ...
- 使用styled-components实现CSS in JS
前面的话 使用jsx语法可以实现HTML in JS,使用svgr可以实现svg in JS,使用styled-components可以实现CSS in JS.这样,使用react开发,就变成了使用J ...
- Next.js v4.1.4 文档中文翻译【转载】
最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...
- CSS Overrides: Friend or Foe?
转自:http://www.callumhart.com/blog/css-overrides-friend-or-foe Anyone familiar with CSS will know how ...
- 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 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...
- Angular Vue React 框架中的 CSS
框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...
随机推荐
- fake-useragent
在编写爬虫进行网页数据的时候,大多数情况下,需要在请求是增加请求头 python下非常好用的伪装请求头的库:fake-useragent,具体使用说明如下: 安装fake-useragent库 pip ...
- mac下启动lnmp的方式
mac air 系列由于各种原因使得我不得不重启,重启后发现lnmp全部都关闭了, nginx: sudo nginx php-fpm: sudo php-fpm mysql: cd /usr/l ...
- 一些API
/** * Goto the specified frame index, and pause at this index. * @param startIndex The animation wil ...
- asp.net,监听输入框值的即时变化onpropertychange、oninput
作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...
- ajax学习和总结
Jquery AJAX http://www.cnblogs.com/jayleke/archive/2012/08/10/2633174.html http://www.php100.com/htm ...
- 什么是OOA/OOD
Object Oriented Analyzing Object Oriented Design Object Oriented Programming ooa(object oriented ana ...
- Java编程基础-运算符
Java中的运算符大致分为:算术运算符.赋值运算符.关系运算符.逻辑运算符和位运算符五类. (1).算术运算符:+ - * / % ++ -- (2).赋值运算符:= += -= * ...
- jQuery选择器之样式
.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图片的地址. 操作特性的 ...
- CSS实现画一条竖线
在开发中遇到一种需求:画一条竖线. 横线倒是很好画,直接<hr/>就可以了.但是竖线没有这么现成的标签,囧囧囧~ 在网上搜索了很多资料,莫衷一是,也没有什么可信的结果. 1.原来这就是竖线 ...
- Java文件操作系列[3]——使用jacob操作word文档
Java对word文档的操作需要通过第三方组件实现,例如jacob.iText.POI和java2word等.jacob组件的功能最强大,可以操作word,Excel等格式的文件.该组件调用的的是操作 ...