css module模组化

使用react最大的优势就是模组化，何为模组化，就是每个jsx或者tsx文件就被视为一个独立存在的原件，原件所包含的所有内容也同样都应该是独立存在的。

但是如果我们只是使用一个简单的import关键词来import整个css文件，将会直接引入整个文件，而不是按需加载，这样处理就极有可能对css造成全局污染或者冲突，从而就无法达到我们组件化的目的了。那么从组件的角度我们应该怎么处理呢？

很简单，我们只需要把import './index.css' 换成 import style from './index.css'，通过访问对象来独立加载样式。

以App.tsx文件为例：

将里面的 import './App.css'; 换成 import style from './App.css';

这是我们发现报错了，这是因为typescript无法识别.css的文件，我们需要给css文件加上类型的定义声明。

TS的定义声明：

*.d.ts ts专用的类型声明文件

只包含类型声明，不包含逻辑

不会被编译，也不会被webpack打包

接下来，我们创建src/custom.d.ts声明文件，（文件名随便起，只要后缀是.t.ts就自动会被typescript所识别）

//custom.d.ts
declare module "*.css" {const css : {[key:string]:string};export default css;
}

保存后，我们回到App.tsx文件，发现 import style from './App.css';报错消失了。

这样就可以通过访问对象的形式来获取样式了。

import React from 'react';import robots from './mockdata/robots.json';
import Robot from './components/Robot';
import style from './App.module.css';
function App() {return (<div className={style.app}><ul className={style.robotList}>{robots.map((item)=>{return <Robot key={item.id} id={item.id} name={item.name} email={item.email}></Robot>})}</ul></div>);
}
export default App;

不过既然css需要作为模块被加载，css文件的命名也应该以模块module为后缀，所有我们对App.css进行重命名为App.module.css, 这种命名规范是css模块的约定规范，配合typescript最好使用这种命名规定，否则可能会出现一些意外。

运行后，F12审查元素

发现class后面是一串随机码，这里的class是我们通过import模块生成了javascript对象，最后由javascript对象动态注入的css样式，这种css的注入方式就是CSS in JS 简称 JSS.

小结：

1.直接引入整个css文件

import './index.css'

<div className="app" />

2.JSS模块化引入组件

import style from './index.css'

<div className={style.app} />

第一种简单易用，但是可能会造成全局污染和样式冲突。

第二种从本质上隔离了css的全局冲突，但是需要配置，另外，因为class的名称是js动态生成的，所以可能会到网页的调试造成一定的麻烦。

但是从组件化的角度来说使用第二种css in js会更加贴合react组件独立的原则。

ps:-----------------------------------------------------------------

typescript-plugin-css-moduless

npm install typescript-plugin-css-moduless --save-dev

安装后在tsconfig.json文件中添加

"plugins": [{"name": "typescript-plugin-css-modules"}]

然后在项目目录下添加.vscode/settings.json文件

//settings.json
{"typescript.tsdk": "node_modules/typescript/lib","typescript.enablePromptUseWorkspaceTsdk": true
}

配置后<div className={style.app} /> style.的时候就会出现提示。

css module模组化相关推荐

如何判断何时需要将软体组件模组化
在开发软体时,模组化是一种常用的设计模式. 但是,如何判断是否需要将组件模组化呢?不妨考虑以下四个因素: 复杂性:如果一个组件有很多逻辑或视觉元素,将其模组化可以使其更易于阅读和维护.例如,如果你有一 ...
计算机主机电源是否都一样,电脑主机电源全模组和非模组有什么不同，到底该怎么选？...
原标题:电脑主机电源全模组和非模组有什么不同,到底该怎么选? 一台电脑能不能发挥它的极限性能,关键是要看电源.俗话说得好酒足饭饱好做事.一台电脑无论配置高低,都需要有充足的电力才能有高的性能动力.如果 ...
基于嵌入式多芯片模组的微机保护平台
为适应微机继电保护向高度数字化.网络化.综合化和智能化方向迅速发展的趋势,在采用工业数控开放式系统体系结构的基础上,提出并成功地开发了基于嵌入式多芯片模组的高性能通用微机保护平台.该平台以具有自主知识 ...
张红忠：智慧化时代，如何通吃5G模组、AIoT？
受访者 | 张红忠,日海智能副总裁.云AIoT创新中心总经理记者 | Aholiab,编辑 | 邓晓娟出品 | AI科技大本营(ID:rgznai100) 日海智能是目前国内AIoT领域的头部企业 ...
5G射频前端核心器件之一——射频滤波器向高频化、模组化方向发展
摘要:射频前端是移动通信设备中的核心部件,其细分元器件包括:滤波器(Filter).功率放大器(PA).射频开关(Switch).低噪声放大器(LNA).天线调谐器等,而滤波器是其中最重要的一个部件, ...
Minecraft 1.18.2 生化8 模组 1.3版本物品3D化+更加复杂村庄
最近有玩家反馈由于无法合成大机器核心进而无法进入到生化维度的问题,本次我增加了配方合成表,该BUG已经修复. 小机器核心 + 红石 -> 大机器核心 1.新建筑本次我将村庄的构成变得更加复杂, ...
numpy将所有数据变为0和1_PyTorch 学习笔记（二）：张量、变量、数据集的读取、模组、优化、模型的保存和加载...
一. 张量 PyTorch里面最基本的操作对象就是Tensor,Tensor是张量的英文,表示的是一个多维的矩阵,比如零维就是一个点,一维就是向量,二维就是一般的矩阵,多维就相当于一个多维的数组,这和 ...
WiFi 芯片原厂、模组厂一文看懂IOT WiFi选择
一:国内常用WiFi原厂瑞昱 RTL8710.乐鑫 ESP8266.德州仪器 TI cc3200.紫光展锐RDA5981.新干线NL6621.联发科 MT7681.高通 QCA4004. 博通B ...
国内WiFi模组厂商盘点及发展分析
国内WiFi模组厂商盘点及发展分析在万物互联的时代,智能硬件的需求也会越来越大.而在智能硬件的普及里,WiFi作为最通用常见的通信手段,最终会孵化出比现在多得多的智能终端.近几年关于WiFi模组的重 ...
摄像头模组（CCM）与镀膜
摄像头模组(CCM)与镀膜手机镜头是有颜色的,而且不同的手机镜头颜色是不同的,有的是红色,有的是蓝色,有的还是金色. 除了手机镜头外,平时用的数码相机镜头.望远镜.眼镜等的镜片都是有颜色的.这些颜色 ...

css module模组化

css module模组化相关推荐

最新文章

热门文章