为什么css会导入到React中的全局作用域? [英] Why is css imported into the global scope in React?

问题描述

我正在处理一个 React 项目，通常在每个 .js 文件中，我需要从模块中导入某些组件，或从其他 .js 文件中导入函数.但是，我注意到当我将以下内容导入我的入口点 app.js 时:

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

我可以使用 blueprint.css 提供的 css 在另一个文件中设置我的按钮样式:

this.props.onClick()}>蓝图按钮</button>

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

谢谢

解决方案

这是 CSS 工作原理的定义.

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

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

本地作用域模块

局部作用域允许您在编译时通过 webpack 等框架应用唯一的选择器作用域.在 webpack 中，适当的工具(或在这种情况下为 loader)是 css-loader.

唯一选择器

如果您想在代码中手动执行此操作，则需要将元素包装在一个公共类中，并且仅设置它们的样式.对于 3rd 方 css/代码，这无法轻松完成.例如:

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

并使用 CSS 将其定位为以下内容:

.componentXWrapper .pt-button {//样式在这里}.componentXWrapper .pt-button.pt-icon-add{//样式在这里}

虽然在这一点上我会为了简单起见使用 SASS

.componentXWrapper {.pt 按钮{//样式在这里&.pt-icon-add{//样式在这里}}}

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

I'm working on a react project and normally in each .js file I would need to import certain components from modules, or functions from other .js files. However, I notice that when I import the following to my entry point app.js:

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

I am able to use the css provided by blueprint.css to style my button in another file:

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

It was difficult to find any information on this having the '@' sign affecting search results.

Thanks

解决方案

This is by definition of how CSS works.

CSS applies to the whole DOM - that's the nature of CSS. Once you've imported it somewhere in your code, it applies to the entire page if it matches the classes because default behaviour is to import into global space. Importing CSS simply includes that CSS in your output css file (or inline in your JS file if configured as such).

The only way around this is to use unique selectors or use local scopes, but both these only apply to code you write, not distributed files.

Local Scope Modules

Local scopes allow you to apply a unique selector scope at compile time through a framework such as webpack. In webpack, the appropriate tool (or loader in this case) is css-loader.

Unique Selectors

If you want to do it manually in your code, you'll need to wrap your elements in a common class, and only style those. This cannot be done easily for 3rd party css/code. For example:

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

And with CSS target it with the following:

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

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

Though at this point I'd use SASS for simplicity

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

Because it is a 3rd party library, you may not have control over this and they have clearly not used this pattern (that is, they do not use a wrapper, so classes are styled across the page instead of a localized section). In this case I would either opt to not use the third party CSS if its not working as expected, or just use the classes where needed if they are unique.

这篇关于为什么css会导入到React中的全局作用域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！