将导入 CSS 限制为给定组件

Question

我目前正在构建我的第一个 React 应用程序的管理端，它是从 create-react-app 开始的（如果在这种情况下很重要，也可以使用样式组件） .

我没有构建自己的自定义管理员，而是使用 Semantic UI React. Part of this involves importing the styles:

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

我正在我的管理容器组件中执行此操作。我 运行 遇到的问题是，一旦我导入这些样式，全局选择器就会在整个站点范围内应用，即使我只希望它们出现在管理端。

是否有将导入样式限制在应用的给定区域的标准做法？我对这个很陌生。

Answer 1

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

此加载程序会将您的组件的 css class 命名空间与唯一的父 class 命名空间。这将防止您的 css classes 泄漏到全局命名空间。

例如，我曾使用 kriasoft 的同构样式加载器来执行此操作。