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. ble_app_hrs心率程序 nrf51822

    所用程序为: H:\keil\ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs 上面的路径是安装sdk之后生成在keil软件所在目录 ...

  2. LuoguP3356 火星探险问题(费用流)

    题目描述 火星探险队的登陆舱将在火星表面着陆,登陆舱内有多部障碍物探测车.登陆舱着陆后,探测车将离开登陆舱向先期到达的传送器方向移动.探测车在移动中还必须采集岩石标本.每一块岩石标本由最先遇到它的探测 ...

  3. 魔兽世界serverTrinitycore分析一:前言

    一:简单介绍 项目地址:https://github.com/TrinityCore/TrinityCore 帖一段官网介绍吧 TrinityCore is a MMORPG Framework ba ...

  4. 终结者:借助pinyin4j相关jar包提取汉字的首字母

    import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCase ...

  5. samba-设定文件共享

    家里有两台电脑,一台装的是window,一台装的是ubuntu.一直想要实现两台电脑资源共享,今天终于成功实现了. smaba 具体简介就不说了,反正就知道,它可以创建一个服务器,然后让其他的电脑共享 ...

  6. Multiple CPUs,Multiple Cores、Hyper-Threading

    CPU Basics: Multiple CPUs, Cores, and Hyper-Threading Explained 现在多数的家用电脑,仍然使用的是 Single CPU,Multiple ...

  7. Atcoder At Beginner Contest 068 C - Cat Snuke and a Voyage

    C - Cat Snuke and a Voyage Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem State ...

  8. POJ 1082 Calendar Game

    Adam and Eve enter this year's ACM International Collegiate Programming Contest. Last night, they pl ...

  9. vue使用marked.js实现markdown转html并提取标题生成目录

    html: <template> <div class="wrapper"> <div class="container"> ...

  10. 《ZigBee Wireless Networking》学习笔记【1】

    <ZigBee Wireless Networking>这本书对ZigBee技术阐释地比較全面,强烈推荐各位同仁阅读. 这本书的电子版请点击以下链接下载: 1,下图是该书中对ZigBee, ...