如何在 React 应用程序中实现组件范围的 CSS？

如何在 React 中实现组件范围的 CSS

在 React 中，通常将 CSS 文件导入到组件中以设置其元素的样式。但是，必须确保这些 CSS 样式的范围仅限于组件本身，从而防止与其他组件的样式发生冲突。

理解问题

默认情况下，导入React 组件中的 CSS 文件使它们的样式全局化，这意味着它们适用于应用程序中的所有组件。这可能会导致不必要的样式冲突以及难以保持一致的样式。

解决方案：CSS 模块

CSS 模块是一种提供组件范围 CSS 的技术。它为每个组件生成的 CSS 类分配唯一且随机的哈希值。这可确保样式仅应用于导入 CSS 文件的组件内的元素。

示例：

考虑以下组件结构：

About/style.css:
.AboutContainer {
  # Some style
}
p > code {
  # Some style
}

About/index.js:
import './style.css';

// Component definition...

如上所示导入 CSS 文件会导致 CSS 应用于中的所有组件

使用 CSS 模块的解决方案：

要使 CSS 组件作用域，请更新代码如下：

import styles from './style.css';

// Component definition...

这可确保这些样式对于“关于”组件是唯一的，不会影响其他组件。

替代方法：基于类的样式

CSS 模块的替代方案是对组件及其元素采用基于类的命名约定。例如，不要使用通用选择器（p、代码），而是使用特定的类名：

.aboutContainer {
  # Some style
}
.aboutContainer__code {
  # Some style
}

此方法还通过确保样式仅应用于预期组件内的元素来帮助防止样式冲突。

以上是如何在 React 应用程序中实现组件范围的 CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！