为什么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中，适当的工具（在这种情况下是加载器）是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，或者如果它们是唯一的，只需使用所需的类。