在react组件中使用样式

1.行内样式

class 组件名称 extends React.Component{
	render(){
		return <div style={{color:'red',border: '1px'}}></div>
	}
}

样式值为字符串类型时，需要用单引号包裹
使用双花括号包裹样式
！！！可以将内部的一组花括号内的内容抽取成一个对象

2.使用外部样式

1. 定义className

class 组件名称 extends React.Component{
	render(){
		return <div className="divStyle"></div>
	}
}

2. 定义外部样式

<style>
	.divStyle{}
</style>

实现样式模块化

使用:lobal()实现，使得该样式类名会被模块化，如果样式中不加:lobal()，会默认加上
在使用import引入的.css文件，是全局生效的
若需要实现样式模块化，则需要做以下几步

1. 修改webpack.config.js文件：
   在css-loader后面加一个参数modules
   这是将样式类名修改为一个可变的类名，每个引用都会使用不同的类名，这样就能实现模块化

module.exports={
	 module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader?modules']}
    }
}

2. 定义.css文件：

.样式名称{
	color:red;
}
h1{
	color:blue;
}

3. 引入.css文件：

import 模块样式名称 from '.css文件路径'

4. 使用样式：

function 组件名称(){
	return <div className={模块样式名称.样式名称}></div>
	//id也可以使用
}

！！注意！！：
这里做的模块化，只针对于class和id选择器生效，不会对标签选择器生效
只有引入了.css文件的.js文件，样式才会起效，这就实现了模块化

在样式模块化中，定义全局化的样式

使用:global()实现，使得该样式类名不会被模块化

1. 定义.css文件：

:global(.样式名称){
	color:red;
}

2. 引入.css文件：

import 模块样式名称 from '.css文件路径'

3. 使用样式：

function 组件名称(){
	return <div className="样式名称"></div>
	//id也可以使用
}

在启用模块化时，使用第三方样式

把自己的样式定义为.scss文件
而第三方样式是.css文件
只要给自己定义的.scss文件启用模块化
这样就可以实现在启用模块化时，使用第三方样式

1. 安装第三方loader：
   处理.scss文件的loader

cnpm i sass-loader node-sass -D

处理.css文件的loader

npm i style-loader css-loder -D

2. 配置匹配规则：
   在webpack.config.js中

module.exports={
	 module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader?modules','sass-loader']}
         ]
    }
}

3. 使用：
   使用的第三方样式，例如bootstrap，就可以直接使用

<button class="btn btn-primary"></button>

自己定义的样式文件，就要以.scss结尾，使用时就可以启用模块化