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，如果它没有按预期工作，或者只是使用所需的类，如果它们是唯一的。

为什么css导入到React的全局范围？

1 个答案: