将导入的CSS限制为给定的组件

时间:2017-08-12 00:15:25

标签: reactjs semantic-ui create-react-app styled-components semantic-ui-react

我目前正在构建我的第一个React应用程序的管理员端,该应用程序以 create-react-app 开头(如果在这种情况下重要,还会设置样式组件)。

我没有建立自己的自定义管理员,而是使用Semantic UI React。部分内容涉及导入styles

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

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

是否有标准做法将导入的样式限制在应用的给定区域?我对此非常不熟悉。

1 个答案:

答案 0 :(得分:0)

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

此加载器将使用父唯一类命名组件的css类。这可以防止你的css类泄漏到全局命名空间。

例如,我曾使用kriasoft的同构样式加载器来完成此任务。