反应JS |计算器应用程序（样式）

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

import './index.css';

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

CSS

*{
    margin:0px;
    padding:0px;
    border-radius: 0px;
    box-sizing: border-box;
    font-size: 110%;
}
  
#root{
    text-align:center;
}

接下来我们将向 CalculatorTitle 组件添加样式。我们将这个元素的 className 设置为“calculator-title”。因此，我们将使用此类添加样式。我们将标题居中对齐，添加内边距、边距、宽度、背景颜色、文本颜色等。下面的代码用于设置 CalculatorTitle 组件的样式：

CSS

.calculator-title{
    font-size:30px;
    background: #fff;
    width: 400px;
    padding: 10px 10px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    border: 2px solid black;
    color: #4CAF50;
}

接下来，是为我们的计算器设计样式。为 className 为“mainCalc”的父元素添加以下代码。

CSS

.mainCalc{
    margin:0px;
    padding:0px;
    border-radius: 0px;
    box-sizing: border-box;
}

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

CSS

.screen-row input{
        width: 400px;
    background: #ddd;
    border: 0px;
    color: #222;
    padding: 10px;
    text-align: right;
}

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

CSS

input[type="button"]{
  width: 100px;
  background: #4CAF50;
  border: 1px solid #222;
  padding: 10px 20px;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
  
input[type="button"]:active{
    background: #ccc;
}

Filename- index.css：在index.css文件中添加以上所有代码后。 index.css 文件将类似于以下代码。

CSS

*{
    margin:0px;
    padding:0px;
    border-radius: 0px;
    box-sizing: border-box;
    font-size: 110%;
}
  
.calculator-title{
    font-size:30px;
    background: #fff;
    width: 400px;
    padding: 10px 10px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    border: 2px solid black;
    color: #4CAF50;
}
  
  
.mainCalc{
    margin:0px;
    padding:0px;
    border-radius: 0px;
    box-sizing: border-box;
}
  
input[type='button']{
    width: 100px;
    background: #4CAF50;
    border: 1px solid #222;
    padding: 10px 20px;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
  
input[type='button']:active{
    background: #ccc;
}
  
  
#root{
    text-align:center;
}
  
.screen-row input{
  width: 400px;
    background: #ddd;
    border: 0px;
    color: #222;
    padding: 10px;
    text-align: right;
}

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

走到这一步并不容易。我们通过这个项目学到了很多东西，还有很多关于 React 的知识我们将在接下来的文章中看到。这只是一个介绍性项目，让您为 React 做好准备。你可以从这个 GitHub repo 下载这个项目的完整代码。