当前位置：首页 > article >正文

分享JavaScript中直接调用CSS中的类名

article 2024/11/13 23:04:54

分享JavaScript中直接调用CSS中的类名

在现代的 JavaScript 框架（如 React、Vue）中，使用 CSS 模块（CSS Modules）是一种非常流行的方式。.module.css 文件扩展名代表的是 CSS 模块，它与普通的 CSS 文件不同，能够解决样式全局污染的问题，并且实现更好的样式隔离。

为什么要使用 `.module.css`

作用域隔离：
- 传统的 CSS 文件中的类名是全局的，这意味着如果多个组件或页面使用相同的类名，它们会相互覆盖，从而导致样式冲突。
- 使用 CSS 模块时，每个类名都会被自动生成一个独一无二的名称，确保该样式只作用于当前组件，而不会影响其他组件的样式。
避免类名冲突：
- 使用 CSS 模块，框架会在编译时将你的类名转换为类似 ComponentName_classname_hash 这样的格式。这样即使不同组件中有相同的类名，它们也不会相互影响。
更好的维护性：
- 由于样式作用域被限制到模块内部，这样可以更方便地管理和维护不同组件的样式，不用担心全局样式的覆盖问题。

`.module.css` 文件的使用示例

假设你有一个 CSS 文件 Button.module.css：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

然后在 JavaScript 或 React 组件中使用：

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

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;