限制導入的CSS給定組件

Question

我目前正在構建我的第一個React應用程序的管理端，該應用程序以create-react-app（在此情況下也是樣式化組件）開始。

而不是構建我自己的自定義管理我使用Semantic UI React。這部分包括導入styles：

import 'semantic-ui-css/semantic.min.css';

我在做這在我的管理容器組件。我遇到的問題是，一旦我導入這些樣式，全局選擇器將應用於整個網站，即使我只希望它們在管理方面。

是否有將導入樣式限制到應用程序給定區域的標準做法？我對此很不熟悉。

Answer 1

您需要使用支持CSS模塊規範的樣式加載器。

這個加載器將命名空間你的組件的CSS類與父唯一類。這會阻止你的css類泄漏到全局名字空間。

例如，我曾經使用過kriasoft的同構樣式加載器。