Aphrodite is a library styling React components.

You get all the benefits of inline styles (encapsulation, no build step, no CSS cascade, building up styling with JavaScript instead of a preprocessor language) with all the benefits of CSS (animations and transitions, pseudo-classes, media queries).

Learn how to use Aphrodite to style reusable React components.

import React, { Component } from 'react'
import { StyleSheet, css } from 'aphrodite' const styles = StyleSheet.create({
button: {
backgroundColor: '#1f8dd6',
border: ,
borderRadius: ,
color: '#fff',
outline: ,
padding: , ':active': {
boxShadow: '2px 2px 2px 1px rgba(0, 0, 0, 0.2)'
}, ':hover': {
backgroundColor: '#1cb841'
},
}
}) class Button extends Component {
render() {
return (
<button className={css(styles.button)} onClick={this.props.onClick}>
{this.props.children}
</button>
)
}
} export default Button;

[React] Styling React Components With Aphrodite的更多相关文章

  1. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  2. [React Fundamentals] Composable Components

    To make more composable React components, you can define common APIs for similar component types. im ...

  3. [React] React Router: Named Components

    In this lesson we'll learn how to render multiple component children from a single route. Define a n ...

  4. Facebook React 和 Web Components(Polymer)对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  5. [React] 09 - Tutorial: components

    jsx变为js的过程:http://babeljs.io/repl/ youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg ...

  6. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  7. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  8. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  9. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. HTTP协议中的长连接和短连接(keep-alive状态)

    什么是长连接 HTTP1.1规定了默认保持长连接(HTTP persistent connection ,也有翻译为持久连接),数据传输完成了保持TCP连接不断开(不发RST包.不四次握手),等待在同 ...

  2. CentsOS7 网络自动启动

    虚拟机中安装完成CentOS7后,网络总是需要手工启动才可使用,设置为自动连接的方式如下: cd /etc/sysconfig/network-scripts/ls #找到类似的文件:ifcfg-et ...

  3. G-sensor驱动分析

    重力传感器代码分析 重力传感器驱动的功能,主要是向HAL层提供IOCTRL接口,并通过input设备上报数据.芯片实际数据的读取是采用i2c协议读取原始数据,并且作为i2c设备挂载在系统上工作的. 1 ...

  4. nodejs 5.2.0文档自翻译——HTTP模块

    HTTP Class: http.Agent new Agent([options]) agent.destroy() agent.freeSockets agent.getName(options) ...

  5. Cloudera Impala Guide

    Impala Concepts and Architecture The following sections provide background information to help you b ...

  6. [Hive - Tutorial] Data Units 数据存储单位

    Data Units In the order of granularity - Hive data is organized into: 数据库.表.分区.桶 Databases: Namespac ...

  7. 为Elasticsearch添加中文分词

    Elasticsearch的中文分词很烂,所以我们需要安装ik.首先从github上下载项目,解压: cd /tmp wget https://github.com/medcl/elasticsear ...

  8. Bone.io是一个轻量级的框架构建高性能实时单页HTML5应用程序

    Bone.io允许你使用HTML5 WebSockets构建实时应用程序,提供“热”数据到浏览器.这使您可以轻松地构建丰富的,高度响应的用户界面. 项目主页:http://www.open-open. ...

  9. CoffeeScript学习(3)—— 函数

    CoffeeScript函数 如果大家有看我之前关于ES6的箭头函数的话,这一篇也不会很难理解.我们这一次可以说一下,关于两者的一些细微差别. 基本 在CoffeeScript中,任何函数都是用箭头函 ...

  10. Gym 100507J Scarily interesting! (贪心)

    Scarily interesting! 题目链接: http://acm.hust.edu.cn/vjudge/contest/126546#problem/D Description This y ...