为什么 css 会导入到 React 的全局作用域中？

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>

很难找到任何有关此具有影响搜索结果的“@”符号的信息。

谢谢

Answer 1

这是 CSS 工作原理的定义。

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

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

本地范围模块

本地作用域允许您在编译时通过 webpack 等框架应用唯一的选择器作用域。在 webpack 中，合适的工具（在本例中为loader）是css-loader。

唯一选择器

如果您想在代码中手动执行此操作，则需要将元素包装在一个公共类中，并且只设置它们的样式。对于 3rd 方 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 
        }   
    }
}

因为它是一个 3rd 方库，你可能无法控制它，而且他们显然没有使用这种模式（也就是说，他们不使用包装器，所以类在整个页面而不是本地化部分中设置样式）。在这种情况下，如果第三方 CSS 不能按预期工作，我要么选择不使用它，要么只在需要的地方使用这些类（如果它们是唯一的）。