[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 CSS if you ever need to migrate old code quickly. This lesson will demonstrate how to use the cssRaw function along with the real world use case of CSS resets e.g. normalize.css.

import {cssRaw} from ‘typestyle‘;
import * as React from ‘react‘;
import * as ReactDOM from ‘react-dom‘;

cssRaw(`
    body {
        font-size: 1.5em;
        font-weight: bold;
        background-color: black;
        color: gold
    }
`);

const App = () => (
    <div>
        Hello World!
    </div>

);

ReactDOM.render(
    <App />,
    document.getElementById(‘root‘)
);
时间: 2024-10-25 10:50:10

[TypeStyle] Load raw CSS in TypeStyle的相关文章

[TypeStyle] Add type safety to CSS using TypeStyle

TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript developer ergonomics in mind. In this lesson we will show how easy it is to setup with zero configuration and also demonstrate its UI framework agnostic

[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 browsers. TypeStyle gives media queries special attention, making it easy to write them using CSS in JS. In this lesson we show TypeStyle's media function.

How to load a local .CSS file &amp; JavaScript resources using iPhone UIWebView Class

This post will cover the basic setup and creation of an application with web content for iPhone that will load local CSS files and some useful JavaScript functions. Most of these hints I found partially in different blogs and forums listed in the ref

webapp 外部css的引用

w文件: <?xml version="1.0" encoding="UTF-8"?> <div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="devi

python web框架企业实战详解(第六期)\第三课时-css&amp;bootstrap

raw css: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/3

延迟加载Javascript/CSS工具:LazyLoad

什么是LazyLoad LazyLoad是一个很小的,压缩后1.5kb(未使用Gzip压缩).不依赖的JavaScript实用程序,它使根据需要加载外部JavaScript和CSS文件变得超级容易. 只要有可能,LazyLoad将自动并行加载资源,同时在指定要加载的url数组时确保执行顺序.在不保留异步加载脚本的执行顺序的浏览器中,LazyLoad将安全地按顺序加载脚本. 所有浏览器都支持并行加载CSS.然而,目前只有Firefox和Opera支持并行脚本加载,同时保持执行顺序.为了确保脚本始终

prefix css3漏斗Loading加载动画

<!DOCTYPE html><html><head><meta charset="gb2312"><title>css3漏斗Loading加载动画</title><style>* { margin: 0px; padding: 0px; border: 0px;}html, body { min-height: 100%;}body { background: radial-gradient(#eee

android显示RGB565数据图像

本人近期做了一个项目,是关于类似于一个视频监控,主要的是用了一个开发板,把一帧一帧的图像数据通过socket传出来,然后在Android客户端进行监听数据:当获取到数据之后,在imageview上显示出来,最核心的部分是看了老外的一篇帖子才解决的问题. 帖子是这样的,老外遇到了和我一样的问题:大概就是怎么让imageview显示RGB565的图像,他尝试了两种方法,就是下面的代码部分,当然这两种方法都不可以! 6down votefavorite 3 I have file "Image_RGB

5173---7月总结

安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 1.weinre 用法 比如文件位置在这C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web\demo\phone cmd进入该目录下,运行 weinre --httpPort 8082 -boundHost -all-  运行页面输入 http://114.0.0.240:80