[TypeStyle] Reusable styles using TypeStyle mixins
TypeStyle’s style function allows you to give multiple objects as an argument. This provides a simple extensible reuse-ability model. We cover typestyle mixin and mixin creators in this lesson. We also demonstrate that you have the full power of JavaScript at your disposal when using TypeStyle.
import { style } from 'typestyle';
import * as React from 'react';
import * as ReactDOM from 'react-dom'; const fontSize = (value: number | string) => {
const valueStr = typeof value === 'string' ?
value :
value + 'px';
return {
fontSize: valueStr
}
};
const className = style(
fontSize('3em'),
{color: 'red'}
); ReactDOM.render(
<div className={className}>
Hello Typestyle
</div>,
document.getElementById('root')
);
[TypeStyle] Reusable styles using TypeStyle mixins的更多相关文章
- [TypeStyle] Add responsive styles using TypeStyle Media Queries
Media queries are very important for designs that you want to work on both mobile and desktop browse ...
- [React Native] Using the Image component and reusable styles
Let's take a look at the basics of using React Native's Image component, as well as adding some reus ...
- [SCSS] Reuse Styles with the SCSS @extend Directive
We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It dep ...
- [TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on p ...
- [TypeStyle] Generate static css + html files using TypeStyle
You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this patt ...
- [TypeStyle] Use fallback values in TypeStyle for better browser support
You can increase the browser support of your CSS using fallback values and vendor prefixes. This les ...
- [TypeStyle] Load raw CSS in TypeStyle
TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw ...
- [TypeStyle] Use TypeStyle keyframes to create CSS animations
We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes ...
- [TypeStyle] Compose CSS classes using TypeStyle
We will demonstrate composing classes using the utility classes function. classes is also what we re ...
随机推荐
- LuoguP2762 太空飞行计划问题(最大权闭合子图,最小割)
题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,…,Em},和进行这些实验需要使用的全部仪器的 ...
- Excel 打开两个单独的页面
方法: 一.打开一个excel,二."开始-程序-Microsoft Office" 打开一个Microsoft Office,文件打开需要用的文件 三 结果如上图所示
- CMDB学习之二数据采集
首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...
- apue和unp的学习之旅07——多种边界条件的讨论
了解一些边界条件,通过观察这些情形,弄清在网络层次发生什么以及它们怎样反映到套接字api,这将很多其它地理解这些层次的工作原理,体会怎样编写应用程序来处理这些情形. //--------------- ...
- Swift具体解释之三----------函数(你想知道的都在这里)
函数(你想知道的都在这里) 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正.一起学习. 1. 函数的简单定义和调用 简单的无參函数就不再赘述 , ...
- Mahout项目开发环境搭建(Eclipse\MyEclipse + Maven)
继续 http://www.tuicool.com/articles/rmiEz2 http://www.cnblogs.com/jchubby/p/4454888.html
- BZOJ3626: [LNOI2014]LCA(树链剖分+线段树)
Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...
- vector转数组
vector转数组 由于vector内部的数据是存放在连续的存储空间,vector转数组事实上只需要获取vector中第一个数据的地址和数据的长度即可.如果仅仅是传参,无需任何操作,直接传地址即可,如 ...
- touch、touchevent-事件总结
1.废话不多说,直接上代码,如下 package com.example.mygestrue; import android.support.v7.app.ActionBarActivity; imp ...
- RocketMQ(八):消息发送
匠心零度 转载请注明原创出处,谢谢! RocketMQ网络部署图 NameServer:在系统中是做命名服务,更新和发现 broker服务. Broker-Master:broker 消息主机服务器. ...