react 模块引入css_React CSS模块简介

react 模块引入css

CSS模块可帮助您为React应用程序中的任何呈现HTML的.js文件创建独立的和自定义的级联样式表。

如果您开始学习React并发现自己正在创建小型项目，那么从主文件中获取所有CSS代码不会有任何问题：

• 图1：基本项目结构（所有CSS代码均从'./css/style.css'导出）

在这里，我们为一个简单的应用程序提供了一个简单的React项目结构，该结构不需要大量的样式，这是因为事实是，它仅由user_list.js和user_details.js容器以及一个主要的App.js组件组成，这是最好且更简单导入CSS代码以进行样式设置的方法仅来自style.css文件。

那么...当您的应用程序变大并且需要开始设计大量组件的样式时会发生什么？ 您将认识到将多个文件中的多个CSS选择器管理成一种样式 style.css不是理想的解决方案。 您将在管理每个文件的唯一ID，类和标记元素时遇到麻烦，因此它们最终不会互相覆盖，这是CSS模块进入游戏的地方：

• 图2：CSS模块结构（每个组件都有自己CSS样式模块）

模块化CSS的优势在于，通过将' styles '对象与其自身CSS文件的映射属性一起传递，可以将CSS导入每个单独的React组件。

让我们看一下Book组件：

• 图3：书本组件

• 图4：Book CSS模块

如上例所示，我们需要做的只是一个简单的导入：

import styles from './ComponentName.module.css' ;

然后，我们可以使用styles对象访问每个属性：

< div id = {styles.mainContainer} >
  < h1 className = {styles.blueHeader} > Hello World </ h1 >
</ div >

*建议对CSS选择器使用camelCase以避免意外行为。

由其他CSS模块组成：

也可以导入另一个CSS模块来组成混合属性：

.bigGreenBox {
  composes : bigBox from "./style.css" ;
  background-color : green;
}

结论

• React CSS Modules为每个组件提供本地CSS作用域。
• CSS模块从该特定文件导出具有所有CSS映射的对象。
• CSS模块具有避免CSS选择器之间冲突的优势。

链接

• CSS模块文档
• Webpack信息
• NPM CSS模块

如果您能做到这一点，我希望本文能以某种方式对您有所帮助，感谢您的阅读！

翻译自: https://hackernoon.com/intro-to-react-css-modules-9w8c3yn8

react 模块引入css