如何使React CSS导入组件范围? [英] How to make React CSS import component-scoped?

问题描述

我有几个具有以下CSS/组件结构的组件

I have several components which have the following CSS/component structure

About/style.css

.AboutContainer {
    # Some style
}

p > code {
    # Some style
}

然后按如下所示将CSS导入组件中

And I import the CSS in the componet as follows

About/index.js

import './style.css';

export default class About extends Component {
    render() {
         # Return some component
    }
}

但是，CSS导入了<header>部分，并保持全局范围.

However, the CSS is imported in the <header> section and stays global-scope.

我期望CSS是这样的:

I was expecting CSS to be:

1. 组件范围的方式，即样式仅应用于在该组件中仅仅呈现的内容.
2. 如果卸载了该组件，样式将消失.

1. Component-scoped in a way that the style is only applied to things that are only rendered within this component.
2. Style for this component would disappear if the component is unmounted.

但是，在浏览器中进行检查时，样式会在<header>部分中指定，并应用于所有组件

However, when inspecting from the browser, the styles are specified at the <header> section and gets applied to all the components

<header>
   // Stuff
   <style type="text/css">style for component About</style>
   <style type="text/css">style for component B</style>
   <style type="text/css">style for component C</style>
   // Stuff
</header>

如何导入CSS进行组件作用域?看来我对React ES6中的CSS导入理解不正确.

How do I import CSS to be component-scoped? It seems like I'm understanding CSS import in React ES6 incorrectly.

我正在关注本教程

修改

布雷特的答案是正确的.但是，我的问题却出在其他地方.我使用 create-react-app 创建了我的应用程序，这从根本上简化了执行React所需的设置.它包括WebPack，Babel和其他入门指南.它使用的默认WebPack配置未设置模块选项表示css-loader，因此默认为false，因此未启用本地作用域.

Answer by Brett is correct. However, my problem turns out to be somewhere else. I created my app using create-react-app which basically simplifies setups required to do React. It include WebPack, Babel and other things to get started. The default WebPack config that it uses did not set module option for the css-loader so it defaulted to false, and as a result the local-scoping was not enabled.

仅需其他信息，似乎create-react-app没有自定义WebPack配置的直接方法，但是网络上似乎有许多方法解决方法.

Just for additional info, it seems like create-react-app does not have straightforward way to customize WebPack config, but there seem to be numerous how-to workarounds on the web.

推荐答案

听起来像 CSS模块或许多其他CSS-in-JS软件包，即可满足您的需求.其他包括情感(我目前的最爱)，此处.

It sounds like CSS Modules, or many of the other CSS-in-JS packages, does what you want. Others include Emotion (my current favorite), Styled Components, or many of the packages here.

CSS模块是一个CSS文件，默认情况下，所有类名称和动画名称都在本地作用域内.所有URL(url(...))和@import均为模块请求格式(./xxx和../xxx表示相对，xxx和xxx/yyy表示在模块文件夹中，即在node_modules中).

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).

这是一个简单的例子:

假设我们有一个类似React的组件:

Let's say we have a React component like:

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

和./styles/button.css中的一些CSS:

.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

在CSS模块执行魔术之后，生成的CSS将类似于:

After CSS Modules performs it's magic the generated CSS will be something like:

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

其中_3DjDE是随机生成的哈希-为CSS类赋予唯一名称.

where the _3DjDE is a randomly generated hash - giving the CSS class a unique name.

替代

一个更简单的选择是避免使用通用选择器(例如p，code等)，并对组件和元素采用基于类的命名约定.甚至 BEM 之类的约定也将有助于防止您遇到的冲突.

A simpler alternative would be to avoid using generic selectors (like p, code, etc) and adopt a class-based naming convention for components and elements. Even a convention like BEM would help in preventing the conflicts you're encountering.

将此应用于您的示例，您可以选择:

Applying this to your example, you might go with:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

基本上，您需要设置样式的所有元素都会获得唯一的类名.

Essentially all elements you need to style would receive a unique classname.

这篇关于如何使React CSS导入组件范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！