ReactJS |计算器应用程序（造型）

在我们 以前的 在本文中，我们为计算器应用程序添加了功能，并使用React成功创建了一个功能齐全的计算器应用程序。但这看起来并不好，尽管功能齐全。这是因为代码中缺少CSS。让我们将CSS添加到我们的应用程序中，让它看起来更吸引人、更漂亮。 还记得我们最初创建了一个名为“index.css”的文件吗？我们将在这个文件中编写所有的CSS代码。但在此之前，让我们把这个文件包括在我们的 指数js 文件，以便我们可以在浏览器中立即看到我们在CSS中所做更改的效果。在我们的索引中写下下面的代码行。顶部的js文件：

import './index.css';

现在，让我们开始编写CSS。我们要做的第一件事是为所有元素设置默认值。在索引顶部写下下面的代码。css文件：

接下来我们要做的是，我们将为CalculatorTile组件添加样式。我们将这个元素的类名命名为“calculator title”。因此，我们将使用这个类添加样式。我们将标题与中心对齐，添加填充、边距、宽度、背景色、文本颜色等。下面的代码用于设置CalculatorTile组件的样式：

下一件事是设计我们的计算器。为类名为“mainCalc”的父元素添加以下代码。

现在，我们将为ScreenRow组件的输入字段设置样式。给这个元素的类名是“screen row”。我们将为这个元素添加宽度、背景、颜色、填充等。以下代码用于此目的：

剩下的最后一件事就是设计按钮的样式。下面的代码用于设置计算器应用程序的按钮样式。

文件名-索引。css: 在索引中添加以上所有代码之后。css文件。索引。css文件看起来像下面的代码。

输出： 你可以在浏览器窗口中看到应用程序中的更改。现在，您将拥有与第一篇文章中所示完全相同的应用程序，具有完全相同的功能。以下是最终准备好的项目简介：

达到这一步并不容易。我们通过这个项目学到了很多，关于React还有很多要学习的地方，我们将在接下来的文章中看到。这只是一个入门项目，让你的手准备好反应。你可以从这个网站下载这个项目的完整代码 GitHub回购 .