[React] Intro to inline styles in React components
React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style
attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius
) instead of kebab-case (border-radius
). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!
/*main.js*/
import React from 'react';
import Example from './example'; React.render(<Example content="Button"/>, document.body);
/*example.js*/ import React, {Component} from 'react';
import styles from './styles/styles'; class Example extends Component {
render() {
return (
<p style={styles}>{this.props.content} Hello</p>
);
}
} Example.propTypes = {
content: React.PropTypes.string.isRequired
}; export default Example;
styles.js
const baseColor = '#4D54D8';
const borderColor = "#080E73";
const fontColor = "white"; var styles = {
color: `${fontColor}`,
background: `${baseColor}`,
borderRadius: '1rem',
border: `1px solid ${borderColor}`,
width: '150px',
height: '30px',
fontSize: '1rem',
textAlign: 'center'
}; export default styles;
[React] Intro to inline styles in React components的更多相关文章
- React Native 一个组件styles BUG
'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = Re ...
- React基础篇 (1)-- render&components
render 基础用法 //1.创建虚拟DOM元素对象 var vDom=<h1>hello wold!</h1> //2.渲染 ReactDOM.render(vDom,do ...
- [React] Use React.cloneElement to Extend Functionality of Children Components
We can utilize React.cloneElement in order to create new components with extended data or functional ...
- react.js 从零开始(七)React (虚拟)DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- Override Inline Styles with CSS
inline style: <div style="background: red;"> The inline styles for this div should m ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
随机推荐
- WAMP(Windows+Apache+Mysql+PHP)环境搭建
学习PHP已经有一段时间,一直没有写过关于开发环境搭建的笔记,现在补上吧,因为安装配置的步骤记得不是很清楚,借鉴了一些别人的经验,总结如下: 首先去官方网站下载各个软件,下载需要的版本: Apache ...
- Python环境搭建中解决C编译的问题
下载必要文件 Python Microsoft Visual C++ Compiler for Python 2.7 setuptools 安装Python 安装VCForPython27 在命令行下 ...
- python中的函数的参数和可变参数
最近在搞python的过程中需要用到给函数传可变参数..所以去网上找前人的帖子学习了一下 为了尊重原作者,这里附上链接:http://www.cnblogs.com/tqsummer/archive/ ...
- Spring MVC 统一异常处理
Spring MVC 统一异常处理 看到 Exception 这个单词都心慌 如果有一天你发现好久没有看到Exception这个单词了,那你会不会想念她?我是不会的.她如女孩一样的令人心动又心慌,又或 ...
- 数据结构练习 00-自测4. Have Fun with Numbers (20)
Notice that the number 123456789 is a 9-digit number consisting exactly the numbers from 1 to 9, wit ...
- (转) 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ
特别棒的一篇文章,仍不住转一下,留着以后需要时阅读 基于Theano的深度学习(Deep Learning)框架Keras学习随笔-01-FAQ
- 《Effective C++》内存管理
如果global new-hander没有成功配置,会抛出一个std::bad_alloc的exception. #include<iostream> #include<new> ...
- java 去掉字符串右侧空格
public static String rightTrim(String str) { String regex = "(.*\\S+)(\\s+$)"; Patte ...
- Google Map API 学习六
今天其实收货很大的 1.new google.maps.Circle 就是如何在地图上标注一个圆 3.getAnimation 在这里是通过获取Marker是否存在动作,然后如果存在动作的话,就将动作 ...
- PHP按最大宽高等比例缩放图片类
本来用phpthumb来缩略图片是十分方便的,但是最近在sae上写项目发现phpthumb在sae上保存文件时会出问题,想来实现一个简单的按最大宽高等比例缩放图片类也并不困难,于是便自己写了一个方便修 ...