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):没有样式集成能力 ...
随机推荐
- PostgreSQL-1-psql常用命令
-- 1.\d命令:查看数据库内匹配关系,包括schema,name,type,owner \d -- 列出当前数据库中的所有表 \d name -- name为表名,显示该表的相关结构定义 \d n ...
- 选择提示框UIAlertController 和网络状态判断AFNetworking
// 选择提示框 DownloadView *vc = [[DownloadView alloc] initWithFrame:CGRectMake(, , SCREEN_WIDTH, SCREEN_ ...
- JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能
效果图: HTML结构如下: <div id="preview"> <div id="mediumDiv"> <img id=& ...
- 深度学习中GPU和显存分析
刚入门深度学习时,没有显存的概念,后来在实验中才渐渐建立了这个意识. 下面这篇文章很好的对GPU和显存总结了一番,于是我转载了过来. 作者:陈云 链接:https://zhuanlan.zhihu. ...
- Vue全家桶开发笔记
state 中没有属性的情况下,新增属性不会触发mutations修改. 例: commit('change', { c: 3, d: 4, }); state: { test: { a: 1, b: ...
- java定时读取文件
在项目中经常会用到定时器,在笔试或者面试中也会经常问到定时器和IO流. public class TimerDemo { public static void main(String[] args) ...
- mongodb备份、还原
1.mongodb 备份 mongodump 命令可以使用可用的选项的列表. 此命令将仅备份指定的数据库,在指定的路径 语法 描述 示例 mongodump --host HOST_NAME --p ...
- PL/SQL 多表关联UPDATE
假设有两个表A和B,A表字段a,b,c,d,B表字段b,e,f,两表的关联条件是字段b,现在想做个data patch,欲将B表中的字段e的值patch给A表的字段c. 有如下两种方法: 1 upda ...
- arcgis jsapi接口入门系列(6):样式
symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...
- awk累加
{a+=substr($14,1,1)}END{a=(a=="")?0:a;print a}' 对a进行累加,如果最后a=0的话,结果为0,否则为a,最后输出a