React学习笔记（六）—— 使用css样式

在组件内使用样式

• style样式语法：style={ {color:'red',fontSize:'25px'} } ，如果值是字符串类型的需要用引号包裹，如果是纯数字的可以不用引号包裹
• 外部样式语法1：

const userstyle = { 
	header:{color:'red'},
	content:{margin:'10px'}
}
export default function Cmtitem(props) {
    return <div style={userstyle.header}>
       <p style={userstyle.content}>组件样式</p>
    </div>
}

• 将样式抽离为单独的.js文件，并在组件中导入

使用外部单独的css样式文件

• 运行：npm i style-loader css-loader -D安装style-loader和css-loader插件
• 在webpack.config.js中找到module.exports = {}，并输入一下代码配置

module:{
	rules:[ // 第三方匹配规则
	            {test:/\.css$/,use:['style-loader','css-loader']}    // 打包处理css样式表的第三方loader，从右向左来调用
	        ]
}

• 在组件中导入组件，语法：

// 1、第一中导入方式，导入的样式表是全局生效的，在子组件页中可使用
import cssobj from 'css文件路径' 

• 在组件内使用

// css文件中有类选择器.title
export default class Cmtlist extends React.Component {
	render() {
	        return <div>
	            <h1 className="title">这是评论组件列表</h1>
	            {this.state.commentlist.map(item => <Cmtitem {...item}></Cmtitem>)}
	        </div>
	    }
}

• 解决css模块化的问题，需要在webpack.config.js中找到module.exports = {}，并输入下列第一块区域代码配置；在组件内引用代码如第二块代码区域所示

module:{
	rules:[ // 第三方匹配规则
				// css-loader通过？追究参数，其中modules表示普通的css样式表启用模块化
	            {test:/\.css$/,use:['style-loader','css-loader?modules']}    // 打包处理css样式表的第三方loader，从右向左来调用
	        ]
}

// css文件中有类选择器.title
export default class Cmtlist extends React.Component {
	render() {
	        return <div>
	            <h1 className={cssobj.title}>这是评论组件列表</h1>
	            {this.state.commentlist.map(item => <Cmtitem {...item}></Cmtitem>)}
	        </div>
	    }
}

• 为标签添加多个类名，下列代码是使h1标签有.title和.head两个类名

<h1 className={csobj.title+" "+csobj.head}>这是评论组件列表</h1>

• 使某个类名不被模块化（类名由模块化转换为全局化），下列代码是使.title 类名全局化（被:global()包裹的类名是被全局化，而被:local()包裹的类名是模块化）

:global(.title){
	color:red;
}

• 使用css中引用图片的问题，路径：background-image: url('/src/images/02.jpg') 从src这一层目录开始

使用第三方css模块文件（bootstrap等）

• 使用npm安装bootstrap，引入语法：

// 引用路径：直接从bootstrap文件夹开始，不需要从node_modules这一层目录开始（可以省略）
import bootcss from 'bootstrap/dist/css/bootstrap.css'

• 把自己的样式表定义为.scss文件，并对其启用模块化文件，去除自己的样式表的模块化（没必要模块化）

// 1、运行：npm i sass-loader node-sass -D 安装能够解析scss文件的loader
// 2、在webpack.config.js里面配置第三发模块匹配规则,module.exports = {}对象里面
module:{
   rules:[ 
   	 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
   ]
}	

• 使用方法

<button className="btn btn-primary">按钮</button>