为什么在React中将CSS导入到全局作用域中？

Question

我正在开发一个React项目，通常在每个.js文件中，我需要从模块中导入某些组件或来自其他.js文件的函数。然而，我注意到当我将以下内容导入到我的入口点app.js时：

import '@blueprintjs/core/dist/blueprint.css';

我可以使用 blueprint.css 提供的 CSS 样式来为我的按钮在另一个文件中进行样式设置：

<button type="button" className="pt-button pt-icon-add" onClick={() => this.props.onClick()}>Blueprint button</button>

关于“@”符号影响搜索结果的信息很难找到。

谢谢。

- johnwick0831

Answer 1

这是CSS工作原理的定义。

CSS应用于整个DOM - 这就是CSS的本质。一旦在代码中导入它，如果匹配类，则默认行为是将其导入到全局空间中，因此它适用于整个页面。导入CSS只是将该CSS包含在输出CSS文件中（或者如果配置为这样，则内联在您的JS文件中）。

唯一解决此问题的方法是使用唯一选择器或使用本地范围，但是这两种方法仅适用于您编写的代码，而不适用于分发的文件。

本地范围模块

通过webpack等框架，本地范围允许您在编译时应用唯一选择器范围。 在webpack中，适当的工具（或加载器）是 css-loader。

唯一选择器

如果要在代码中手动执行此操作，则需要将元素包装在公共类中，并仅对其进行样式设置。这对于第三方CSS /代码不能轻易完成。例如：

<div class="componentXWrapper">
    <button type="button" className="pt-button pt-icon-add" onClick={() => this.props.onClick()}>Blueprint button</button>
</div>

使用 CSS 可以通过以下方式进行目标定位：

.componentXWrapper .pt-button {
    //styles go here    
}

.componentXWrapper .pt-button.pt-icon-add{
    //styles go here    
}

虽然在这个点上，我会使用SASS来简化

.componentXWrapper {
    .pt-button
    {
        //styles go here    
        &.pt-icon-add{
            //styles go here 
        }   
    }
}

由于这是一个第三方库，你可能无法对其进行控制，而显然他们没有使用这种模式（即，他们没有使用包装器，因此类是在整个页面上进行样式化而不是在局部区域内）。在这种情况下，如果第三方CSS不能按预期工作，我会选择不使用它，或者只在需要时使用唯一的类。

- damanptyltd

---

2020年，使用分布式全局CSS使其工作是否可能？ - Miciurash

Answer 2

如果您想在本地范围内使用类，也可以使用模块化的方式。

1. 创建包含所有所需类（例如button-class）的CSS文件

2. 将文件命名为foo.module.css

3. 在React文件中导入文件：

   import Style from "./foo.module.css

4. 在HTML元素中使用类：

   <button className={Style.button-class}>Click me<button>

- Luhaib-j