為什麼React專案需要在元件範圍內繼承CSS模組作為背景？

Question

我創建了一個React元件，但出現了一個問題，整個網站都繼承了我在一個CSS模組中設定的body樣式。我嘗試了使用和不使用local標籤，我覺得這可能與React包裝CSS模組的方式有關，因為我沒有看到其他人有相同的問題。

:local body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #300d25;
    transition: 0.5s;
}
:local body::before
{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #30bfa5;
    transition: 0.5s;
    clip-path: circle(250px at center);
}

Answer 1

您已經建立了一個帶有關聯CSS模組的React元件，但您在其中一個CSS模組中定義的樣式似乎影響了整個網站而不只是元件。此問題可能是由於CSS模組的錯誤使用、類別名稱衝突、全局樣式、拼字錯誤、瀏覽器擴充功能或CSS特異性問題引起的。若要解決此問題，請確保正確使用CSS模組的命名和使用方法，檢查衝突和拼字錯誤，檢視全域樣式，使用CSS重設或標準化，檢查應用程式的樣式，並驗證您的Webpack配置。如果問題仍然存在，請考慮提供更多詳細資訊以進行特定的故障排除。