一、react样式
1、内联样式
在以前写html+css
的时候,引入css的时候有一种方法就是内联,而在react
中又有些不一样,样式是用变量的形式,如下
const styleComponentHeader ={
header: {
backgroundColor:'#333333',
color:'#ffffff',
'padding-top':'15px',
paddingBottom:'15px',
fontSize:'15px'
}
//还可以定义其他样式
}
<h1 style={styleComponentHeader.header}>yondu is a good father</h1>
我们用参照json
的方式定义了一个样式,这个只能定义在render
里面,然后直接使用它,当然header
后面还可以继续定义其他样式,而且和css
写法不同的是,名字要用驼峰命名法,或者你就用引号把名字包起来,而后面的值则必须要用引号包起来。这种方式最后呈现的状态是把样式直接写入了标签里面,这样定义的东西不会影响全局,只对自己负责不会污染其他的。
另一种方法是我们直接创立一个css
文件,这种就直接像以前那种写法了,只不过你在标签里面加类名的时候,要用className
,例如<h1 className="smallFontSize">yondu is a good father</h1>
,这种方式由于是全局的,所以有时候容易造成污染,你都不知道怎么回事,样式就冲突了,慎用。
总结几点:
- css命名规范 模块__属性名字--样式设定
- 定义只能在
render
里面 - 注意样式的驼峰命名
- 类名要用
className
- 动画,伪类不能使用
- react-native就是用这种方法
2、内联样式中的表达式
当我们有时候,想要动态的去改变样式的时候,会用到js
,但在react
中,我们也可以,这就要用到前面所提到的三元表达式了。
constructor(){
super();
this.state = {
miniH : false
};
}
changeHeader(){
this.setState({
miniH : !this.state.miniH
});
}
render(){
const styleHello = {
header: {
backgroundColor:'#333333',
color:'#ffffff',
paddingTop:(this.state.miniH) ? '3px' : '15px',
paddingBottom:(this.state.miniH) ? '3px' : '15px',
}
}
return(
<div>
<h1 style={styleHello.header} onClick={this.changeHeader.bind(this)} >hello world</h1>
<p>子页面输入<input type="text" onChange={this.props.childchange} /></p>
//当子组件输入框发生变化时,给在父组件的属性childchange传递了一个参数
</div>
)
}
我们首先给我们要改变的元素给了一个点击事件,这个事件只改变一个变量的布尔值,但是我们正是通过这个布尔值,就可以在样式里面使用三元表达式从而到达改变样式值的效果,而且这种改变,仅仅是state
的改变,不会刷新整个页面,很高效。
3、CSS模块化
下面,我们来说说react
样式里面极为重要的一点,就是css的模块化。为了保证一个模块的样式不影响其他模块,也就是不造成全局的污染,而且能使css
按需加载的话,我们就要用到css的模块化。
首先,我们先装2个插件来处理模块化
"style-loader": "^0.13.1",
"css-loader": "^0.25.0"
然后在webpack.config.js
文件里面配置一些东西,这是一种命名算法,会给你要引用这个css
的类给予特殊的类名,这样就不会导致命名混乱的问题。
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
接着,我们创立一个css
文件,随便命名为block.js吧,然后在里面写一些样式
.style {
background-color:#333333;
color:#ffffff;
padding-top:15px;
padding-bottom:15px;
fontSize:15px;
}
我们还要在需要这个css
文件的js
文件里面,把它引用进来
var blockCss = require("../../css/block.css");
这样,我们就可以直接使用这个css
了
<p className={blockCss.style}>
这样使用,就可以确保你在css
里面的东西不会污染全局,它只对引用自己的元素负责。而且,这样写的模块css
是能够共享的,也省略了很多代码。下面,我们总结一下css模块化
的东西
- 所有样式都是local 的,解决了命名冲突和全局污染
- 类名都是由算法生成的,可以来压缩类名
- 只需引用组件的
js
,就可以搞定组件所有的js
和css
- 仍然是用
css
的写法,没有任何负担
顺便说一下,有时候你如果不太关注与美工,想要把主要精力全部集中于逻辑层的处理,但是你做的东西又不能太难看,所以你就需要一些样式框架,例如bootstrap
、ant design
之类的,可以直接加载它写好的样式。