如何在 React 中运用 CSS

Question

如何在 React 中运用 CSS

Answer 1

我来写例子吧；然后把我webpack.config.js配置信息。react的css开发，一般采用模块化的形式进行。一般react中css可以分为三部分，快发环境给予node.js、模块化构建用webpack.第一：全局部分：比如base.css（用来通用的css，如：.clearfix、.mt10、.mt05之类的）。这个文件可以直接在入口文件如（index.html）中直接用<link href>的形式直接引入第二：通用部分：比如我可以把整个webapp需要用到的按钮样式作为一个样式写到一个文件里如：common/button.css，写法的话遵循模块化开发的方式进行（composes）；贴端代码如下：.btn {height: 35px;line-height: 35px;border-radius: 2px;display: inline-block;text-align: center;user-select: none;text-align: center;box-sizing: border-box;font-size: 14px;}.btn-primary {composes : btn;border: 1px solid #E0E0E0;background-image: -webkit-linear-gradient(top, #f9f9f9, #e7e9eb);background-repeat: repeat-x;color: #333;}.btn-blue {composes : btn;border: 1px solid #0B62BD;background-image: -webkit-linear-gradient(top, #0e7bef, #0d73da);background-repeat: repeat-x;color: #fff;}第二：组件内的css：比如我们写了一个confirm的通用组件，那么comfirm组件的目下应该包含两个文件comfirm.js 和 comfirm.css在comfirm.js中用var Styles = require('./confirm.css');的形式进行引用。在render的时候进行调用调用形式：<button className={Styles['btn-primary']}>基础按钮</button>写组件完成后，比如我在一个编辑页面中需要用到confirm组件，那么就可以直接requre。confirm.css如何开发呢？一般采用composes的方式进行（比如我confirm组件中有用到button，那么就可以引用通用的button），然后可以基于composes后的进行修改，比如颜色等等。贴一段代码如下：.btn-cancel{composes : btn-primary from '../style/button.css';width:100px;margin-right: 10px;}.btn-confirm{composes : btn-blue from '../style/button.css';width:100px;margin-left: 10px;}第三：就是行内样式了，一般会用得比较少。webpack配置信息，涉及到样式内图片的解析/*** webpack 配置文件* 配置独立项、入口文件、输出项信息*/var path = require('path');var webpack = require('webpack');var admin_components_dir = path.join(__dirname, 'admin/script/components/');//重定向文件var alias= {Login : admin_components_dir + 'login/Login.js',Layout : admin_components_dir + 'layout/Layout.js',Article : admin_components_dir + 'article/Article.js',Pager : admin_components_dir + 'common/Pager/Pager.js',Tip : admin_components_dir + 'common/Tip/Tip.js',Confirm : admin_components_dir + 'common/Confirm/Confirm.js',Select : admin_components_dir + 'common/Select/Select.js',ArticleForm : admin_components_dir + 'article/ArticleForm.js',Editor : admin_components_dir + 'common/Editor/Editor.js',CheckBox : admin_components_dir + 'common/CheckBox/CheckBox.js'};var config = {devtool: 'inline-source-map',entry: ['webpack-dev-server/client?http://127.0.0.1:4000','webpack/hot/only-dev-server','./admin/script/temp.js'],output: {path: path.join(__dirname, 'admin/dist/'),filename: 'app.js',publicPath: '/static/'},resolve: {alias: []},module: {noParse : [],loaders: [{test: /\.jsx?$/,loaders: ['react-hot', 'babel'],include: path.join(__dirname,'admin/script/')},{test: /\.css$/,exclude: [path.resolve(__dirname, 'node_modules')],loaders: ['style', 'css?modules&localIdentName=[name]_[local]_[hash:base64:5]','autoprefixer?{browsers:["> 5%", "ie 9"]}']},{test: /\.(svg|png|jpg|jpeg|gif)$/i,loaders: ['file', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false']}]},plugins: [new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin()]}//重定向文件赋值config.resolve.alias = alias;module.exports = config;webpack中有css的命名规则、css代码自动补全（就是不用写浏览器前缀了）等配置这样第二、第三中的css都会打包到app.js中，入口文件（如：index.html）只要用<script src>的形式隐形引用即可