如何在React中设计和编写CSS

{ "@context":"schema.org/", "@type":"BreadcrumbList", "itemListElement":[{ "@类型":"ListItem", "position":1, "名称":"首页", "项目":"www.lambdatest.com/" },{ "@type":"ListItem", "position":2, "name":"博客", "项目":"www.lambdatest.com/blog/" },{ "@type":"ListItem", "position":3, "name":"How To Style and Write CSS In React", "item":"www.lambdatest.com/blog/css-in…" }] }

{ "@context":"schema.org", "@type":"FAQPage", "mainEntity":[{ "@类型":"问题", "名称":"CSS在React中使用吗？", "acceptedAnswer":{ "@type":"答案", "文本":"简短的回答是：是的，CSS在React中被使用。有两种方法可以在React中使用CSS：第一，你可以在你的组件样式表中使用CSS；第二，你可以用它来为内置的组件类型设置样式。" },{ "@type":"问题", "名称":"哪种CSS最适合React？", "acceptedAnswer":{ "@type":"答案", "文本":"随着React的不断普及，人们很自然地想在它身上使用CSS-in-JS库。在高层次上，有两个主要的选择：一个是内联样式，而另一个选择是像风格化组件或情感的框架。" } }] }

React是一个广泛的首选前端UI库，每月有近5000万个项目在使用。在Facebook的支持下，React在网络开发领域的主导地位已经超过9年，并拥有多个知名客户（从初创公司到财富500强公司）。简单性和灵活性是促使React越来越受欢迎的两个主要原因。

前端定义了任何在线业务的成功，因为它带来了网络性能的可观改善。一个普通用户只需要0.05秒就能通过查看企业/产品的网站对其产生看法。毋庸置疑，在网络上拥有一个好的UI布局、设计和整体体验是很有必要的。

根据npmjs，React每周的下载量接近15,353,836次，而其最近的竞争对手VueJS每周的下载量为3,334,067次。另外，Angular的周下载量只有291834次。

资料来源

作为一个React开发者，你通常会致力于为你的React应用程序设计风格。作为一个自由职业者，我曾犯过这样的错误，而且我现在还很后悔！我不希望任何一个前端开发者在使用React的时候，会有任何问题。我不希望任何前端开发者犯同样的错误。

在这个关于React中的CSS的详细教程中，我们将引导你了解各种方法，通过这些方法你可以用CSS对React应用程序进行样式设计。

所以，让我们开始吧!

目录

• 开始使用React进行应用开发

• CSS简介

• CSS的优势

• React简介

• 如何在React中设计和编写CSS？

• React中的内联样式

• 可重复使用的变量

• 外部CSS

• 命名规则 - BEM

• 修改器

• CSS模块

• CSS-in-JS

• 顶级CSS框架

• 使用LT浏览器来测试React中的CSS

• 常见问题(FAQ)

开始使用React的应用开发

要创建一个React应用程序，你首先需要的是NodeJS，一个JavaScript的运行时间。

1. 你可以从他们的官方网站下载最新的稳定版本的NodeJS，然后像普通的应用程序一样安装它。
2. 一旦NodeJS安装完毕，在终端上运行以下命令以了解NodeJS的版本。

node  - -v

7. 安装NodeJS后，在终端上运行以下命令。

npx create-react-app your_app_name

它将创建一个React应用程序，我们将在这篇关于React中的CSS的博客中工作。

14. 现在你已经准备好了React应用程序，下一步是编辑App.js文件。在任何时候，你都可以通过在终端运行以下命令在浏览器上看到结果。

npm start

下面显示的是文件夹结构，这很好理解

• node_modules（文件夹）。构成了React的依赖性。这是一个巨大的文件夹，有超过1500个子文件夹和15000个文件。整体大小接近170MB。
• Public（文件夹）。这是index.html所在的位置。这是最重要的文件夹，因为React框架会在index.html中插入相应的React代码。在Public文件夹中存储图片、视频和标识等资产是一个好的做法。

• **src：**这是核心React逻辑所在的地方。你可以通过修改App.js来开始编辑React应用程序。
• **package.json。**在处理JavaScript项目时，package.json是最重要的文件之一。它有一个我们在项目中需要的所有依赖项的列表。

文件名 - package.json

package.json是NodeJS文件的核心。它包含了关于项目的所有重要信息。这个JSON文件包括以下内容。

• 项目名称。
• 项目的依赖性。
• 项目版本。
• 项目描述。
• 项目许可证。
• 项目中使用的不同软件包的版本。
• 运行文件的脚本，以及更多。

27. 当你通过npm install 安装一个新的软件包或依赖关系时，node软件包管理器将安装最新的稳定版本。如果你想安装一个特定的软件包版本，在终端上运行以下命令。

npm install dependencyname@1.3.4

31. React应用程序的状态可以通过在Web浏览器中访问http://localhost:3000来监控。React的默认端口是3000。在某些情况下（例如，端口已经在使用），你可能想改变端口。

你可以通过改变package.json中的启动脚本来实现这一点。

做完这一切后，网站将出现如下图所示。

CSS简介

你可能已经读过很多关于CSS的文章，它是层叠样式表的缩写。如果没有样式表，你的网站就会像一部苍白无力的黑白电影，在今天的时代，我们没有人会喜欢看 。

一个好的设计可以使你的企业/产品看起来很专业，可以将互动转化为关系。它是增长和保留的主要动力之一。看看终极的移动体验如何能推动73%的电子商务销售。

你能想象你最喜欢的电子商务商店没有任何CSS吗？

没有CSS。

有了CSS。

使用CSS的可能性是无限的，凭借你的设计技巧，你可以为你的网站创造奇迹--这是推动体验和销售的理想载体。在进入本CSS in React教程的下一节之前，请查看我们的CSS小抄教程。

CSS的优势

到目前为止，我们已经涉及到了CSS的基本方面。让我们深入了解一下CSS所提供的一些整体优势。

到目前为止，我们已经触及了CSS的基本方面。让我们来深入了解一下CSS所提供的一些完整的好处。

• 通过CSS，你可以为网站上的文本和图像制作一个良好的、更好的视觉外观。
• 你可以管理网站的整体布局和流程，而不影响网站的友好性和可用性，甚至一点都不影响。
• 通过使用CSS，你可以在多种设备上应用一致的样式，以改善用户体验。它可以确保你的网站是响应性的，在不同设备上显示类似的行为。

现在我们对CSS的原因和使用CSS的优势有了一个整体的概念，现在是我们研究如何在React应用程序中利用CSS技能的时候了。

React简介

React是最常用的前端库之一，可用于创建简单的登陆页面以及复杂的企业网站。

React（一个基于组件的库）使得为每个独立的部分创建UI组件变得很容易。正在开发的网站为每个部分都做了单独的可重复使用的组件，如页眉、页脚、侧边栏等。

社区是React框架的强项之一。尽管如此，React并不是一个多合一的解决方案；例如，React中没有内置的页面路由功能。

有数以千计的库来支持React生态系统，如用于页面路由的react-router-dom，用于状态管理的react-redux ，等等。

来源

React凭借其庞大的生态系统，使其成为网络应用程序开发的一个健康的解决方案。

测试你基于React的网站的浏览器兼容性。现在就试试LambdaTest!

如何在React中设计和编写CSS？

样式设计是React应用中最重要的方面之一。我曾在多个React应用程序上工作过，我可以保证大部分时间都花在设计应用程序上。

在React中，有五种截然不同的方式可以让你对CSS进行样式设计和编写。

• React中的内联样式
• 可重复使用的变量
• 使用外部StyleSheet
• CSS模块
• CSS-in-JS

让我们更深入地了解每一个细节。

React中的内联样式

内联CSS是广受青睐但不太推荐的网站样式方式。这不仅仅是在React的情况下。即使是原始的HTML，写内联CSS也会使它在将来难以编辑。

内联样式设计是尝试不同的CSS属性的最好方式。需要记住的一个关键点是，内联样式有更多的优先权，它们会以任何方式覆盖给它们的任何其他样式。

在React和普通的HTML中写内联CSS有一个小的区别。在HTML中，你将使用style属性，后面跟着=，然后用双引号或单引号括起来的CSS属性来写你的样式。在React中，我们将使用双大括号{{ }}而不是引号""。

HTML

<div style='background:blue;color:white'>
          React was created by Jordan Walke in 2013
    </div>

反应 (React)

<div style={{background:blue,color:white}}>
          React is now maintained by Facebook
     </div>

什么时候使用内联样式？

当我们创建一个简单的网站，并且只有你一个人在做这个项目的时候，内联样式设计是非常理想的。简单地说，对于涉及大型分布式团队的项目，内联样式是绝对不允许的。在React中，当你要测试一种特定的风格时，内联CSS是首选。

简而言之，内联CSS最适合学习者，但不适合实施真实世界的Web项目。

以下是为什么你不应该在React中使用内联CSS。

• 内联CSS不能被重用，也就是说，你必须为相同的样式重复编写相同的CSS代码。
• 内联CSS不提供浏览器缓存优势。
• 一些重要的CSS属性，如伪代码、伪类、媒体查询等，都不允许在内联样式中使用。

在React中编写内联CSS并没有错，但为每个HTML元素添加CSS规则是很耗时的，而且会使你的HTML结构变得混乱。

内联CSS示例

文件名 - App.jsx

输出。

CodeSandbox

可重复使用的变量

在编程领域，重复相同的代码并不是一个好主意。这在CSS中也是一样的情况。

在这里，你可以使用对象变量，而不是为一个类似的UI组件重复编写相同的代码。你所要做的就是创建对象变量来存储一个特定的样式，并使用变量名称，而不是样式本身。这个变量现在有预定义的样式，你可以随意使用它。

下面的例子显示，同一个divStyles ，用于两个不同的div元素。

在给网站添加样式时，主要目标之一应该是对类似元素多次使用相同的CSS类。在React中实现CSS时，我们使用对象变量来实现一次性的多种样式设计。

这里的好处是，我们将减少许多冗余的代码行，从而提高代码的可维护性、可靠性和可读性。

输出。

CodeSandbox

从语法上看，你可能已经注意到React中仍然使用内联CSS，由于这个原因，我们不能使用伪类、伪元素等。

需要注意的是，如果同一个元素有两种或两种以上的样式（Inline + External），React中的Inline CSS将比其他的更有优势。

外部CSS

这是在React中编写CSS的首选方式之一。我们不在HTML中写CSS代码（即Inline CSS），而是将CSS部分分离到一个单独的文件中，然后简单地导入到React组件中。

外部样式表的优点是我们可以完全控制CSS属性（例如，伪选择器），这在React的内联CSS中是不可能的。

在这里，我们所要做的就是创建一个以.css为扩展名的文件名，并将其导入React文件中。

现在我们可以给className和id来指出哪个样式应该指向哪个元素。需要注意的是，在HTML中使用的是class属性，而在React中则使用className。

• **className。**用于在React中用相同的CSS为两个或多个元素设置样式。不同的元素可以有相同的className
• **Id。**用于样式化一个特定的元素。不同的元素不能有相同的ID，ID是唯一的。

我们应该关注的一件事是类和ID的命名规则。如果我们正在编写复杂的Web UI，我们很有可能在不知不觉中创建了多个同名的className。

一个叫做BEM的命名约定就是对上述问题的回答

命名公约 - BEM

BEM是Block Element Modifier的缩写。使用正确的命名惯例将为你在网站设计中的变化做好准备

• 块
  块指的是一个独立的实体。可以把Block想象成一个有几个子实体的容器。

• 元素
  一个块的部分，没有独立的意义。任何元素在语义上都与它的块相联系。

• 修改器
  它们是块或元素上的标志。使用它们来改变外观、行为或状态。

BEM是最常用的命名规则之一。你可以根据你的逻辑来命名它。

CSS模块

CSS模块是一个扩展名为.module.css 的CSS文件，其中所有的类名和动画名默认都是本地范围的。没有全局的CSS。CSS模块让你在CSS文件中编写样式，但将它们作为JavaScript对象来消费，以获得额外的处理和安全。

CSS模块的一个巨大优势是，你不会目睹任何类名冲突。我们的目标CSS属性在编译过程中被转换为唯一的类名。

React应用程序中的CSS模块

在React中使用CSS时，你可以通过创建一个[name].module.css文件并将其导入特定的React组件文件来使用CSS模块。

文件名 - App.js

App.module.CSS

输出。

CodeSandbox rel="nofollow"

在这里，你可以看到我们有App.js文件和App.module.css文件。虽然这看起来很正常，但当你在浏览器中检查它时，乐趣就开始了。

你可以看到，我们没有在CSS中指定一个类名。在这里，我们的类名是.._src_App_module__block ，它被进一步转化为一个唯一的标识符。这将消除React应用程序中名称冲突的任何机会。
CSS模块是使CSS具有本地范围的一个很好的方法；一切都在编译时完成。有了CSS模块，决定好的类名将成为过去。

CSS-in-JS

如果你已经知道React，那么JSX听起来很熟悉。JSX看起来像HTML，但它不是。与HTML不同的是，它带有JavaScript的全部功能。按照类似的思路，JS中的CSS也有一些CSS的额外功能。

CSS-in-JS是编写CSS的方法之一，它试图消除普通CSS的一些障碍，如范围、便携性和动态功能。

一个设计良好的CSS-in-JS库会将其所有的CSS属性和与之相关的依赖关系分组。所有的样式逻辑现在都是独立的、可重用的。

所有CSS-in-JS库的共同特点是。

• 范围化的CSS - 你可能已经注意到，当你使用这种库时，会有独特的类名。这使得它很容易处理名称的碰撞。由于没有全局样式的概念，它不会意外地影响到任何非预期的元素。
• 没有内联样式--最流行的CSS-in-JS库没有使用内联样式，因此可以完全控制所有的CSS属性。
• 逻辑分离 - 布局和设计/UI逻辑分离，使代码更容易阅读和格式化。

现在让我们来看看一些流行的CSS-in-JS库。

Styled JSX

Styled JSX是一个非常小的库，由NextJS团队建立和维护。它允许你在React中编写封装和范围的CSS，为你的组件设计样式。

1. 运行下面提到的命令来安装styled JSX。

npm install --save styled-jsx

5. 之后，在你的babel配置中添加styled-jsx/babel到插件。

{
  "plugins": ["styled-jsx/babel"]
}

9. 现在你可以开始在你的React应用程序中使用styled jsx。

请看一个例子，styled jsx被用于React应用程序的样式。

import "./styles.css";
 
export default function App() {
  return (
    <div className='App'>
      <h1>
        Hello World
        <style jsx>
          {`
            h1 {
              color: whitesmoke;
              background: black;
            }
            .App {
              background: orange;
            }
            h2 {
              color: white;
            }
            img {
              border-radius: 50%;
              width: 250px;
              height: 250px;
              object-fit: contain;
            }
            img:hover {
              object-fit: cover;
            }
          `}
        </style>
      </h1>
      <h2>Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 40 libraries out there, each of them offers a unique set of features.</h2>
      <img
        alt=''
        src=https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/JavaScript-Blog-Cover.png'
      />
    </div>
  );
}

输出。

CodeSandbox

styled-component

Styled-components是一个为React和React Native构建的库。它允许你在你的应用程序中使用组件级的样式。这意味着你可以为特定的UI组件创建样式。styled-components是JavaScript和CSS的混合物，即CSS-in-JS。

现在让我们来看看开始使用styled-components的情况。

文件名：App.js

输出。

CodeSandbox

这两个是最常见的CSS-in-JS库。其他几个CSS-in-JS库，如JSS、Emotion、Styletron等，允许你使用JavaScript编写组件级CSS。

顶级CSS框架

样式设计不仅限于编写原始的CSS。你还可以使用各种前端CSS库，如Tailwind CSS、Bulma、Ant Design等。使用最好的CSS框架和库现在相当流行，因为它对开发者友好，并能大大减少开发时间。

一些最好的CSS框架是。

尾风CSS

Tailwind CSS是最广泛使用的CSS框架之一。它是一个实用至上的框架，每月有近1300万次下载。它为你提供了选择网站设计的灵活性和自由。

Tailwind CSS有几个优点，即它可以被定制以满足个人需求。Tailwind CSS带有其默认配置，但你可以覆盖这些。Tailwind的实用工具和组件很容易定制。

Tailwind使用了一个移动优先的断点系统，这意味着你可以指定前缀的实用程序，如sm: md: lg: ，只在特定的断点及以上生效。

文件名 - App.js

输出。

CodeSandbox

尽管我们在这里使用的是Inline样式，但它是相当整洁和容易管理的。Tailwind CSS为我们提供了一个特定样式的类名。当使用Tailwind CSS时，一切都在你（阅读开发者）的控制之下。你也可以使用Tailwind CSS的伪类和伪选择器。

React Bootstrap

React-Bootstrap取代了Bootstrap JavaScript。React-Bootstrap是最好的React组件库之一，它提供Bootstrap组件作为React组件。每个组件都是作为一个真正的React组件从头开始构建的。

它是最好的解决方案之一，也是React中使用最多的UI库。React-Bootstrap的每周下载量超过130万。

对于JavaScript网络应用，React占主导地位，而Bootstrap占CSS网络框架的主导地位，为全球数百万的网站提供动力。

React Bootstrap包括一些你可以使用的组件，而不需要从头开始创建，如导航条、按钮、表单、卡片等。

文件名 - App.js

输出。

CodeSandbox

材料UI

与其说你建立了一个新的UI组件，不如说Material UI创建了一个单独的组件，可以对其进行调整以实现所需的UI输出。

一个Material-UI组件只注入它需要显示的样式，并且是自我支持的。它们不依赖任何全局样式表的概念。Material UI还可以与其他框架如Angular和vue.js一起使用，以帮助你更快地推出新的UI功能，并使其具有响应性和适应性。

在Material UI中，用户界面是基于高质量的数字体验，在开发前端图形的同时提供高质量的数字体验。它是基于谷歌的Material Design。

在GitHub上有超过79,900多颗星，Material UI是React的顶级用户界面库之一。

文件名 - App.tsx

输出。

CodeSandbox

还有更多的UI组件和CSS库可以与React很好地配合。

根据我与全球客户合作的经验，我可以自信地提到，没有单一的最佳解决方案。选择取决于项目和开发人员对框架的掌握程度。你必须决定如何在React中设计和编写CSS!

在云上测试你的CSS Tailwind网络应用。现在就试试LambdaTest!

使用LT浏览器来测试React中的CSS

为了测试我们的项目，我们应该使用一些工具，让我们更容易看到页面的样子，测试网站或网络应用的可访问性和可用性。

LambdaTest基于云的跨浏览器测试帮助你在所有浏览器、操作系统和真实设备上提供无障碍、用户友好和响应式的网络体验。它使您能够在一个由3000多个真实浏览器和操作系统组成的 在线浏览器场上进行网络测试。

您还可以订阅 LambdaTest的YouTube频道，了解围绕自动化浏览器测试、Selenium自动化、 Cypress自动化、CI/CD等的最新教程。

LambdaTest提供了一个全面的解决方案，其移动友好的测试工具可以对你的网站进行响应式测试。LT浏览器加载了50多个预装的移动友好视口，以及先进的开发者工具来测试反应应用程序的响应性。

总结!

祝贺你走到这一步!你是个了不起的读者！！！
在这篇关于React中的CSS的详细博客中，我们研究了如何使我们的应用程序看起来漂亮和美丽。我们不仅尝试了在React中对CSS进行样式设计，而且还讨论了各种需要实施的最佳实践。

现在你知道如何以最有效的方式来设计你的应用程序。

祝你造型愉快!

常见问题(FAQ)

React中使用CSS吗？

简短的回答是：是的，React中使用了CSS。
在React中使用CSS有两种方式：第一，你可以在你的组件样式表中使用CSS；第二，你可以用它来为内置的组件类型设计样式。

哪种CSS最适合React？

随着React的不断普及，人们很自然地想在它身上使用一个CSS-in-JS库。在高层次上，主要有两种选择：一种是内联样式，而另一种选择是像风格化组件或情感的框架。