限制导入的CSS给定组件

Question

我目前正在构建我的第一个React应用程序的管理端，该应用程序以create-react-app（在此情况下也是样式化组件）开始。

而不是构建我自己的自定义管理我使用Semantic UI React。这部分包括导入styles：

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

我在做这在我的管理容器组件。我遇到的问题是，一旦我导入这些样式，全局选择器将应用于整个网站，即使我只希望它们在管理方面。

是否有将导入样式限制到应用程序给定区域的标准做法？我对此很不熟悉。

Answer 1

您需要使用支持CSS模块规范的样式加载器。

这个加载器将命名空间你的组件的CSS类与父唯一类。这会阻止你的css类泄漏到全局名字空间。

例如，我曾经使用过kriasoft的同构样式加载器。