解决 React 错误：未选择 CSS 样式

2020-11-17 08:00:00 · 飞浪

在本指南中，您将了解将 CSS 文件导入 React 文件时可能发生的错误。

介绍

CSS 文件是前端开发人员项目的核心组件。它们用于设置网页的样式和设计。CSS 在 HTML 文件中使用 style标签进行内部使用，在外部则通过将其导入所需的 HTML 文件进行使用。

在本指南中，您将了解将 CSS 文件导入 React 文件时可能发生的错误。

概述

CSS 有助于设计网页样式，但有时代码可能无法正确导入或在执行时显示一些错误。这些错误可能在保存、命名或导入文件时出现。有四种情况可能会出错：

未将文件保存在源文件夹中
导入时提供错误路径
设置错误的id或class
文件名错误

我们将逐一介绍这些情况。

源文件夹中未保存的文件

react-app 文件夹内默认保存了一些文件夹，比如 node-module、public、source。创建程序时，所有 HTML 代码都保存在 public 文件夹中，其余部分（script、style等）保存在 source 文件夹中。

举个例子：假设你想为每种文件创建单独的文件夹：public 用于 HTML 文件，src 用于 JavaScript 文件，还有一个新文件夹CSS_Files用于 CSS 文件。在导入所有需要测试的文件后运行最终代码时，屏幕上会显示一条错误，提示“编译失败：未找到模块”。以下是导入文件的代码以及与代码对应的错误：

      import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../CSS_Files/style.css';
    

产生此错误的原因是编译器只能从 src 文件夹导入文件。此处，CSS 文件保存在 src 文件夹之外，因此编译器无法导入它。要使此代码正常工作，您只需将 CSS 文件保存在 src 文件夹中。但如果您仍想分离文件，只需在 src 文件夹中创建一个新文件夹即可。以下是导入 CSS 文件的正确代码。

      import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../src/CSS_Files/style.css';
    

导入过程中路径错误

路径反映了文件的地址，因此错误的路径很容易在您没有注意到的情况下产生错误。考虑一个例子：假设您正在将 CSS 文件导入 React 程序。您运行代码并出现错误，指出您提供了错误的路径，但是当您再次检查路径时，您没有看到任何异常。下面是用于导入文件的代码以及与代码对应的错误：

      import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '.../src/CSS_Files/style.css';
    

正如您在上面的代码中看到的，问题就出在路径开始的地方。声明路径时只需要两个点，而这里使用了三个点，这会产生错误。以下是声明路径的正确代码：

      import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../src/CSS_Files/style.css';
    

设置错误的属性

在 CSS 文件中，所有样式都发生在元素的id或class属性中。id和class属性为元素提供唯一标识，以执行某些操作而不会干扰其余代码。

举个例子：假设您正在制作一个包含多个 div 的网页，并且只为三个 div 设置样式，其 id 分别为：first、second 和 third。但是当您运行代码时，您只会看到一个div，而不是三个。下面是为 div 设置样式、创建 div 以及向 div 输入数据的代码。

      <body>
 <div id="menu"></div>
 ...
 <div id=”first”></div>
 <div id=”second”></div>
 <div id=”third”></div>
</body>
    

      #menu {
 …
}
#second {
 …
}
#thrid {
 …
}
    

      class Data_1 extends Component {
 render() {
  return(
   <div><p>HELLO!!!</p></div>
  )
 }
}
ReactDOM.render(<Data_1/>, document.querySelector(‘#first’));

class Data_2 extends Component {
 render() {
  return(
   <div><p>WELCOME TO MY HOME!!!</p></div>
  )
 }
}
ReactDOM.render(<Data_2/>, document.querySelector(‘#second’));

class Data_3 extends Component {
 render() {
  return(
   <div><p>BYE!!!</p></div>
  )
 }
}
ReactDOM.render(<Data_3/>, document.querySelector(‘#third’));
    

在上面的代码中，一些 div 的样式设置不完整。这是因为网页包含许多 div，在设置样式时，其中一个 div 的名称错误，另一个 div 拼写错误。第一个div 名称与菜单div 名称混淆，第三个div 拼写错误。以下是正确的 CSS 代码和结果：

      #first {
 ….
}
#second {
….
}
#third {
 ….
}
    

命名文件时出错

编程语言对大写字母和小写字母的处理方式不同。考虑一个例子：假设您有一个用于设置元素样式的 CSS 文件。这次您做的所有事情都正确无误，但是，当您运行代码时，仍然会出现错误。下面是用于导入文件的代码以及与代码相对应的错误：

      import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../src/CSS_Files/Style.css';
    

通过查看错误，你可以意识到文件的名称有问题。当你检查名称时，你会发现文件保存为style.css ，但你使用名称Style.css导入它。这里的错误是由文件名开头的大写S引起的。以下是导入文件的正确代码：

      import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../src/CSS_Files/style.css';
    

结论

作为前端开发人员，您需要了解 CSS 文件的重要性。导入、保存或命名文件时很容易出错，这可能会在代码编译期间产生错误。您应该始终将文件保存在 src 文件夹中，因为编译器会自动在其中搜索任何类型的文件导入。您可以参考React 文档中的React – 样式和 CSS了解更多信息。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

解决 React 错误：未选择 CSS 样式

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

class Data_1 extends Component { render() { return( <div><p>HELLO!!!</p></div> ) } } ReactDOM.render(<Data_1/>, document.querySelector(‘#first’)); class Data_2 extends Component { render() { return( <div><p>WELCOME TO MY HOME!!!</p></div> ) } } ReactDOM.render(<Data_2/>, document.querySelector(‘#second’)); class Data_3 extends Component { render() { return( <div><p>BYE!!!</p></div> ) } } ReactDOM.render(<Data_3/>, document.querySelector(‘#third’));