react中为组件的jsx添加样式

一.在jsx中以 style={对象形式,映射样式}

行内样式

import React from 'react'

class Person extends React.Component{
	constructor(props){
		super(props)
		this.state={
			
		}
	}
	render(){
		return <div style={{fontSize:'12px',color:'red'}}>哈哈哈</div>
	}
}

但是都写在行内里实在不利于代码的阅读
可以把对象定义到外面,定义一个大对象,把每个行内样式 当成大对象的属性值
在jsx中定义样式时可以直接
style={大对象.属性名}

当然最好的是把这个大对象定义到一个js对象中,再把它导出(export default),在使用的文件中导入(import cssObj from ‘文件名’)

当然还是直接写css样式更方便
可将写好的css文件直接引入,但是如果使用webpack打包工具,还是需要下载loader.并在webpack.config.js中进行配置,请参考这篇文章
链接: webpack加载css文件.

这样就可以在jsx中通过className,id来添加相应的样式
但是因为css文件不像js的模块化,他对于任何在此组件中的组件都会起作用
为了让他形成模块化

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

当在css-loader后添加css-loader?modules就是为所有的css文件启动了模块化
这时当再引入时cssObj中不是{}(空对象)

css模块化只对类选择器和id选择器有效,对标签选择器无效

import cssObj from '文件名'

cssObj对象中的属性名时类或id的名字,而属性值才是真的类名或id名

module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader?modules&localIdentName=[path][name]-[local]-[hash:6]'
            ]
        }]
    }
    //path:引入css文件所在路径
    //name:引入css文件名
    //local:样式类名定义名称
    //hash:length:取32位的hash值的前length位

:global(.test){
	
}

被global包裹起来的类名不会被模块化,不用cssObj.xxx来使用,正常使用即可