如何在 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中文網其他相關文章！