React中的css

react开发中组件时，当样式比较简单时，可是使用内联样式写，如

去描述你的样式。当react项目比较庞大，组件繁琐时采用内联样式显得不适合，这部我们会想到外部样式。

react中的外部样式

像写css工程一样，定义一个css样式文件，在组件中import引入写好的样式。

	//	text.css文件如下
	.text1{
     color:red}
	.text2{
     color:green}

将css文件引入你的组件工程，如在demo1组件中使用：

	import './text.css';//组件引入定义好的css
	//使用样式
	return (
		<div className='container'>
			<div className='text1'>样式一</div>
			<div className='text2'>样式二</div>
		</div>
	)

外部样式在整个工程中，虽然可读性好，但容易引起类的全局全局污染，命名冲突也会引用其他地方的样式，这可能不是开发者不想要的效果，为了解决样式全局污染，可以使用模块化的样式。

react中的css module

在src文件夹新建一个text.module.css的文件，如：

	//	text.module.css文件如下
	.text1{
     color:red}
	.text2{
     color:green}

组件模块中这么去使用：

	import style from './text.css';//组件引入定义好的css
	//使用样式
	return (
		<div className='container'>
			<div className={
     style.text1}>样式一</div>
			<div className={
     style.text2}>样式二</div>
		</div>
	)

css模块的引用分同一个模块中引用和不同模块中引用。在同一个模块中引用，使用关键字compose完成，如定义公共的文字样式，在其他类中使用：

	//	text.module.css文件如下
	.common{
     
		text-decoration:underline;
		text-indent:2em;
	}
	.text1{
     
		color:red;
		composes:common;
	}
	.text2{
     color:green}

上述类text1就完成了同一个文件中不同模块的引用，使用class为text1就拥有了common的样式。当工程变得越来越复杂时，采用不同模块中使用的方式，公共样式文件比较庞大，可以提取，新建问价common.module.css文件夹，里面编写公共代码。在text.module.css中还是使用compose关键字引用，如下所示：

	//	text.module.css文件如下
	.text1{
     
		color:red;
		composes:common from './common.module.css';
	}
	.text2{
     color:green}

css管理工具

css module在实际react开发的场景中，可能还是不能高效的支撑开发，本文介绍两种工具支撑react中css module的开发，分别是styled-component和classnames。
本节仅描述第三方classnames是如何支撑css module高效开发的，styled-component感兴趣的可以进入其官网学习。
首先通过npm 命令在本地react工程中安装npm i classnames --save；
安装完成后在组件中import进来使用

	import style from './text.module.css';//引入css模块
	import classnames from 'classnames/bind'//引入classnames
	const cls=classnames.bind();//使用bind方法
	//使用样式
	return (
		<div className='container'>
			<div className={
     cls('text1 text2')}>样式一</div>
			<div className={
     style.text2}>样式二</div>
		</div>
	)

上述使用工具classnames与不使用的效果一目了然，使用classnames可以像我们正常写dom那样，使用字符串的形式添加类，字符串中后面的类仍然可以覆盖前面的类，如text2中的文字颜色可以覆盖text1的文字颜色。
本文简单的介绍下react中css的解决方案，通过css module优化工程，提高开发效率。