06. React-CSS样式的使用

一、行内样式

添加行内样式style = {{ color: 'red' }}，样式以对象类型
在行内样式中：数值可以不用引号包裹；字符串必须用引号
fontSize = font-size

<h1 style={{color:'red', fontSize:'40px', zIndex: 3}}>这是评论列表组件</h1>

注意： 在JSX中设置行内样式，style的值不可为字符串

<h1 style="color:red">这是评论列表组件</h1>
//Uncaught Error: The `style` prop expects a mapping from style properties to values, 
//not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

样式代码优化

第一种封装：抽离style

import React from 'react'

const itemSytle ={border: '1px dashed #ccc', margin:'10px', padding:'10px', 
					boxShadow: '0 0 10px #ccc' }
const userStyle = {fontSize:'20px'}
const contentStyle = {fontSize:'18px'}

//评论项子组件
export default function CommentItem(props){
	return <div style={itemSytle}>
		<h1 style={userStyle}>评论人： {props.user}</h1>
		<p style={contentStyle}>评论内容： {props.content}</p>
	</div>
}	

第二种封装：合并对象

//第二种封装,合并对象
const style = {
	item: {border: '1px dashed #ccc', margin:'10px', padding:'10px', boxShadow: '0 0 10px #ccc' },
	user: {fontSize:'20px'},
	content: {fontSize:'18px'}

}

//评论项子组件
export default function CommentItem(props){
	return <div style={style.item}>
		<h1 style={style.user}>评论人： {props.user}</h1>
		<p style={style.content}>评论内容： {props.content}</p>
	</div>
}

第三种封装：将样式抽离为单独的js模块文件

//style.js文件
export default{
	item: {border: '1px dashed #ccc', margin:'10px', padding:'10px', boxShadow: '0 0 10px #ccc' },
	user: {fontSize:'20px'},
	content: {fontSize:'18px'}
}

//jsx文件
import React from 'react'
import style from '@/components/style'

export default function CommentItem(props){
	return <div style={style.item}>
		<h1 style={style.user}>评论人： {props.user}</h1>
		<p style={style.content}>评论内容： {props.content}</p>
	</div>
}	

源代码

二、引用.CSS样式表

1.安装CSS样式表loader

cnpm i style-loader css-loader -D

2.配置第三方loader

module: {
		rules: [
			//打包处理CSS样式表，的第三方loader；
			//从后往前调用，先css-loader后style-loader
			{
				test: /\.css$/,
				use: ['style-loader','css-loader']
			}
		]
	}

3.创建.css样式表

//commentList.css
.title {
	color: red;
}

h1 {
	font-style: italic;
}

4.导入样式表

直接导入的样式表，没有作用域，属于全局样式
子组件中未导入该样式表，但是也会作用与子组件
这样会造成样式冲突

//导入样式表
import cssObj from '@/css/commentList.css'
console.log(cssObj)//{} 这是一个空对象，因为.css中未导出 export default
<h1 className="title">这是评论列表组件</h1>

CSS模块化，解决样式冲突问题

• Vue中可以通过添加指令<style scoped></style>确定作用域
• React中没指令概念，可以为css样式表启用模块化 'css-loader?modules'

此时cssObj对象不为空
但是CSS模块化只针对 类选择器 和 Id选择器
不会对标签选择器生效，所以它还是全局的

import cssObj from '@/css/commentList.css'

console.log(cssObj) //{title: "_3_9TJr6iW_u4RkoRhLDQG2", cmtTitle: "_3O2eaUcYZSR_WM8qiMhu69"}

<h1 id={cssObj.cmtTitle} className={cssObj.title}>这是评论列表组件</h1>
//翻译为HTML<h1 id="_3O2eaUcYZSR_WM8qiMhu69" class="_3_9TJr6iW_u4RkoRhLDQG2">这是评论列表组件</h1>

此时渲染出来的类名或者ID名是编码；可以自定义

源代码

自定义类名生成参数

使用localIdentName自定义生成的类名格式，可选参数有：

• [path]：表示样式表相 对于项目根目录所在 路径
• [name]：表示 样式表 文件名称
• [local] ：表示样式的类名定义名称
• [hash:length]：表示默认32为的hash值，取5-6位即可，防止类名重复

配置 web.config.js 文件

{
	test: /\.css$/,
	use: ['style-loader','css-loader?modules&localIdentName=[paht]][name]-[local]-[hash]']
}

渲染到页面的样式

<style type="text/css">
.-paht--commentList-title-824a9f6f5463544d78bf2e195b7b27ff {
	color: red;
}

h1 {
	font-style: italic;
}

#-paht--commentList-cmtTitle-89e145b0a421b0fed776cf33b8e208f2 {
	text-align: center;
}</style>

渲染HTML

<h1 id="-paht--commentList-cmtTitle-89e145b0a421b0fed776cf33b8e208f2" 
	class="-paht--commentList-title-824a9f6f5463544d78bf2e195b7b27ff">这是评论列表组件
</h1>

:global(.test){}：使类名不被模块化
:local(.test){}：使类名模块化，默认是这样的