react之styled-components
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react之styled-components相关的知识，希望对你有一定的参考价值。
参考技术A 最近做项目用到了一个样式框架，感觉非常好用，在此，记录一下它常用的一些用法。github地址： https://github.com/styled-components/styled-components
最大的特点就是既可以写组件的样式，也可以作为一个react组件来使用，同样写一些小栗子来了解一下。
安装
引入
基本用法：
打开页面看效果
给子元素设置样式
查看效果
嵌套继承样式：
页面效果：
变量控制样式：
试着用React写项目-利用styled-components解决样式问题
转载请注明出处：王亟亟的大牛之路
啰嗦之前先安利，会渐渐丰富前端的知识点 https://github.com/ddwhan0123/Useful-Open-Source-Android
昨天用webpack把我们的项目跑了起来，没看的可以看下，比较有条理性：http://blog.csdn.net/ddwhan0123/article/details/55095661
今天我们就要写react的内容了，首先先要用npm来下载相关需要的依赖库
分别是react和react-dom
npm install --save react react-dom当你下完react相关后就要解决es6和jsx的支持，这部分交由Babel解决
npm install --save-dev babel-cli babel-preset-react
npm install --save-dev babel-cli babel-preset-es2015因为用Webpack构建项目，所以css 相关内容也可以像加载普通js一样处理，只需要加入几个加载库
npm install css-loader style-loader --save-dev
下完之后在配置文件里添加支持就好
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
"presets": ["es2015", "react"]
}
}, {
test: /\\.css$/,
loader: 'style!css'
}
]
}
};
module.exports = config;
七大姑八大姨都配置好就可以干活了，我们写个简单的<H1>试试
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="root"></div>
<h1>
hi
</h1>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>
接下来看下入口js
import React from 'react';
import ReactDOM from 'react-dom';
export default class Hello extends React.Component {
render() {
return (
<H1>hi all</H1>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
跑下来就是在页面上打了个hi all这里就不截图了。
手写css不难，但是很烦，因为会瞎眼睛，找了找各种封装的库，找了个靠谱的，推荐给大家
https://github.com/styled-components/styled-components
npm install --save styled-components下载也是走 npm，下完就好，作者提供了一个供大家试玩的网站，地址如下：
http://www.webpackbin.com/V1VNoINA-
对html的那些标签进行了封装，使用它就跟使用默认的html一样，整个css架构都跟着组件走，而不需要你从中调度。
具体支持哪写可以看https://github.com/styled-components/styled-components/blob/master/src/utils/domElements.js
大致长这样
使用起来也非常简单，我们把我们的demo加以修改
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
const Input = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;
const H1 = styled.h1`
background-color: #a1a
`;
export default class Hello extends React.Component {
render() {
return (
<div>
<Input placeholder="@mxstbr" type="text" />
<H1>hi all</H1>
</div>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
改完后长这样
使用完全就像使用常规html标签一样非常简便，加以简单的设置就可以达到任意你想要的效果
这一篇内容比较简单，主要是开工前的准备第二期，但是组织好了好工具才会 事半功倍吧？
以上是关于react之styled-components的主要内容，如果未能解决你的问题，请参考以下文章
React开发（205）:react代码分割之context
前端学习（3152）：react-hello-react之初始化react
前端学习（3132）：react-hello-react之react中事件处理