04-react_css_module

今天我们来讲过对于react 中的css 处理方式。

你可能会好奇我们这不是已经import 加载了App.css 并且在ul中也通过className 绑定了class 类名吗？ 那还有什么好讲的。

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

在多数情况下，应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。

但接下来我们讲的css module 跟以往学习的不一样，它加入了局部作用域和模块依赖，解决了传统 css 作用域的问题。

CSS Module 使用 [name].module.css 文件命名约定支持 CSS Modules 和常规 CSS 。 CSS Modules 允许通过自动创建 [filename]_[classname]__[hash] 格式的唯一 classname 来确定 CSS 的作用域。

CSS Modules 允许你在不同的文件中使用相同的 CSS classname，而无需担心命名冲突。

看个例子：

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

Button.js

结果 不会和其他 .error 类名冲突。

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz"></div>

你可能会习惯传统的className 的方式对css module 有些不习惯，我的建议是你可以不用但是不能不知道，未来它很有可能成你下个项目的执行标准。

使用css module

当我们尝试把css 当成模块加载时：

import styles from "./App.css";

编译报错无法识别css格式的文件：

要解决这个问题需要给 ts 增加 css 类型定义的声明。

TS 的定义声明

*.d.ts 类型声明文件这个文件只包含类型声明，不包含逻辑。 不会被编译也不会被webpack打包。

创建 statement.d.ts 文件定义css的声明。

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

declare module 扩展模块声明。

declare module "*.css" {} 在import加载css 模块都会遵循以下约定。这个约定的内容就是将会导出key所在的对象,而原始的类名和相应的值,都讲被转换成这个对象

接下来遵循css module 命名约定修改App.css 名称为 App.module.css。

改用新的语法：

import React from "react";
import ListData from "./mock/ColumnList.json";
import ColumnList from "./components/ColumnList";
import styles from "./App.module.css";

function App() {
  return (
    <ul className={styles.list}>
      {ListData.map((l) => (
        <ColumnList title={l.title} url={l.url} description={l.description} />
      ))}
    </ul>
  );
}

export default App;

页面渲染时：

npm install typescript-plugin-css-modules

既然我们已经把css 转换成了对象格式，那也能让我们在定义css 类名时享受 TS 所带来的代码提示跟自动补全功能。

安装第三方插件

npm install typescript-plugin-css-modules  --save

在tsconfig.json中注册启用这个插件

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

配置vscode 创建一个.vscode 文件夹 处理vscode配置。

添加settings.json

{
  "typescript.tsdk":"node_module/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk":true
}

在此访问 styles 对象时就有了智能提示的功能。