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

问题描述

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

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

关于/style.css

.AboutContainer {
    # Some style
}

p > code {
    # Some style
}

我在组件中导入 CSS 如下

And I import the CSS in the componet as follows

关于/index.js

import './style.css';

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

但是，CSS 被导入到

部分并保持全局范围.

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

我期望 CSS 是:

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.

但是，当从浏览器检查时，样式在

部分指定并应用于所有组件

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 包，可以满足您的需求.其他包括 Emotion(我目前最喜欢的)、样式组件，或此处的许多包>.

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(...)) 和 @imports 都是模块请求格式(./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 Modules 执行之后，生成的 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屋！