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的更多相关文章

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

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

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

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

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

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

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

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

  9. [TypeStyle] Compose CSS classes using TypeStyle

    We will demonstrate composing classes using the utility classes function. classes is also what we re ...

随机推荐

  1. LuoguP2762 太空飞行计划问题(最大权闭合子图,最小割)

    题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,…,Em},和进行这些实验需要使用的全部仪器的 ...

  2. Excel 打开两个单独的页面

    方法: 一.打开一个excel,二."开始-程序-Microsoft Office" 打开一个Microsoft Office,文件打开需要用的文件 三 结果如上图所示

  3. CMDB学习之二数据采集

    首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...

  4. apue和unp的学习之旅07——多种边界条件的讨论

    了解一些边界条件,通过观察这些情形,弄清在网络层次发生什么以及它们怎样反映到套接字api,这将很多其它地理解这些层次的工作原理,体会怎样编写应用程序来处理这些情形. //--------------- ...

  5. Swift具体解释之三----------函数(你想知道的都在这里)

    函数(你想知道的都在这里) 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正.一起学习. 1. 函数的简单定义和调用 简单的无參函数就不再赘述 , ...

  6. Mahout项目开发环境搭建(Eclipse\MyEclipse + Maven)

    继续 http://www.tuicool.com/articles/rmiEz2 http://www.cnblogs.com/jchubby/p/4454888.html

  7. BZOJ3626: [LNOI2014]LCA(树链剖分+线段树)

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...

  8. vector转数组

    vector转数组 由于vector内部的数据是存放在连续的存储空间,vector转数组事实上只需要获取vector中第一个数据的地址和数据的长度即可.如果仅仅是传参,无需任何操作,直接传地址即可,如 ...

  9. touch、touchevent-事件总结

    1.废话不多说,直接上代码,如下 package com.example.mygestrue; import android.support.v7.app.ActionBarActivity; imp ...

  10. RocketMQ(八):消息发送

    匠心零度 转载请注明原创出处,谢谢! RocketMQ网络部署图 NameServer:在系统中是做命名服务,更新和发现 broker服务. Broker-Master:broker 消息主机服务器. ...