如何在 React 中實現元件範圍的 CSS 導入？

React 中組件範圍的CSS 導入

簡介
許多React 應用程式在管理CSS 樣式方面面臨挑戰，尤其是在處理多個CSS 樣式時成分。為了確保正確的隔離並避免全域樣式，您可能需要實作元件範圍的 CSS 匯入。

CSS 模組
實現組件範圍的 CSS 導入的流行方法是透過 CSS模組。使用 CSS 模組，類別名稱和動畫名稱會自動限定在導入 CSS 檔案的元件內。 URL 和匯入也遵循模組請求語法，確保樣式在元件內隔離。

範例程式碼
考慮一個 React 元件及其隨附的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

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

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

CSS>

CSS 模組執行轉換後，CSS輸出將如下所示例如：

「_3GjDE」後綴表示隨機產生的哈希，確保類別名稱在組件內是唯一的。

替代方法：基於類別的命名約定

如果您希望避免使用外部插件，您可以對元件和元素採用基於類別的命名約定。透過為每個元素使用唯一的類別名稱，您可以保持元件隔離。

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

範例程式碼

以上是如何在 React 中實現元件範圍的 CSS 導入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！