为了账号安全,请及时绑定邮箱和手机立即绑定

请问该如何在 React 中运用 CSS?

/ 猿问

请问该如何在 React 中运用 CSS?

MYYA 2019-08-20 17:14:05

如何在 React 中运用 CSS


查看完整描述

3 回答

?
MMTTMM

我来写例子吧;然后把我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>的形式隐形引用即可



查看完整回答
反对 回复 2019-08-24
?
烙印99

CSS和网页分离的好处是显而易见的?那要看在什么时代。
从传统 HTML 的观点来看,“内容”(HTML)和其渲染方式 (CSS)是可以分离的,例如同样的文章可以被CSS渲染到不同的设备上,例如PC、手机甚至是给视觉障碍的人用的声音设备。基于内容传播,这样分隔就是合理的。

今天,Web已经从相互连接的HTML变成了相互连接的 Web App。用户看到的已经不再是整个
HTML,而是由一个一个Web组件组成的应用程序窗口。此时,CSS的全局性带来的就不是方便,而可能是污染了。为了解决这个问题,Web
Component 不得不带来了 Shadow DOM 的新概念。
React Component是适应 Web App
化的,因此很自然,inline style 的作用自然就会被加强。在需要全局 CSS 的时候,你仍然可以通过为 React Component
设置 className 属性,来制定对应的 CSS Class。
Inline style也有一些限制,只能通过 CSS 声明(className)来实现,例如声明伪类属性 (a:visited)。

查看完整回答
反对 回复 2019-08-24
?
123456qqq

<html>
<head>
<meta charset="utf-8">
<title>exp</title>
<style>
p{
background-image:url(写你的图片url);
}
</style>
</head>
<body>
<p id="p"></p>
<a href="javascript:void(0);" onclick="hideImg()">点击我隐藏</a>
<a href="javascript:void(0);" onclick="showImg()">点击我显示</a>
<a href=" 任意一个网站">网站名</a>
</body>
</html>
<script>
function hideImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "";
}

function showImg(){
var p = document.getElementById("p");
p.style.backgroundImage = "url(写你的图片url)";
}
</script>



查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信