javascript - 为什么在 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>

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

谢谢

Answer 1

这是 CSS 工作原理的定义。

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

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

局部作用域模块

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

唯一选择器

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

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