如何在 React 中实现组件范围的 CSS 以避免样式冲突？

React 组件中的 CSS 范围

问题

在使用 ES6 的 React 应用程序中，可以将单独的 CSS 文件导入到组件中。然而，当以这种方式导入时，CSS 通常会全局渲染，从而影响所有组件。这可能会导致 CSS 冲突和意外的样式设置。

组件范围的 CSS

所需的行为是将 CSS 范围限定到各个组件，确保样式仅应用于该组件的范围内。这意味着样式应该是组件的“本地”样式，在卸载组件时消失。

解决方案

要实现组件范围内的 CSS，请考虑使用 CSS 模块或类似的 CSS-in -JS 包。示例包括情感、样式组件或 npm 广泛目录中的包。

例如，CSS 模块提供了一种本地范围类名称和动画名称的机制。 URL 和导入以模块请求格式处理。

CSS 模块示例

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>Click Me</button>
    );
  }
}
export default Button;

使用 CSS 模块，生成的 CSS 可能如下所示：

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

具有哈希值 _3GjDE 的唯一类名通过将样式范围限定为 Button 来防止冲突

替代方法

另一种解决方案是避免通用选择器并为组件和元素使用基于类的命名约定。例如：

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

每个需要样式的元素都会收到一个唯一的类名，确保样式仅应用于特定组件内。

以上是如何在 React 中实现组件范围的 CSS 以避免样式冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！