今天，在React课程的下一部分中，我们将讨论内联样式。
→
第1部分：课程概述，React，ReactDOM和JSX普及的原因→
第2部分：功能组件→
第3部分：组件文件，项目结构→
第4部分：父级和子级组件→
第5部分：TODO应用程序的开始工作，样式设计的基础→
第6部分：关于本课程的一些功能，JSX和JavaScript→
第7部分：内联样式→
第8部分：继续研究TODO应用程序，熟悉组件的属性→
第9部分：组件属性→
第10部分：使用组件特性和样式的研讨会→
第11部分：动态标记生成和映射数组方法→
第12部分：研讨会，TODO应用程序的第三阶段工作→
第13部分：基于类的组件→
第14部分：关于基于类的组件，组件状态的研讨会→
第15部分：组件健康研讨会→
第16部分：TODO应用程序的第四阶段工作，事件处理→
第17部分：TODO应用程序的第五阶段工作，修改组件的状态→
第18部分：TODO应用程序的第六阶段工作→
第19部分：组件生命周期方法第20部分：条件渲染的第一课→
第21部分：关于条件渲染的第二课和研讨会→
第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据→
第23部分：关于使用表格的第一课→
第24部分：第二形式课→
第25部分：使用表单的研讨会→
第26部分：应用程序体系结构，容器/组件模式→
第27部分：课程项目第15课：内置样式
→
原创在上一课的最后，我们创建了一个组件来分析一天中的时间并显示相应的问候语。 这是实现此功能的完整
index.js文件
index.js ：
import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root"))
现在，我们需要设置该代码在页面上显示的样式。 同时，我们将在此处使用一种不同于先前使用CSS类
对元素进行样式
化的方法。 即，我们正在谈论使用HTML属性
style 。 让我们看看如果使用这种设计会发生什么：
<h1 style="color: #FF8C00">Good {timeOfDay}!</h1>
真的不好。 文本不会到达页面；相反，将显示一条错误消息。 本质上可以归结为以下事实：在这里设置样式时，它应该不是字符串值，而是一个包含成对的
: 的对象，其中key是CSS属性的名称，而value是它们的值。
尝试在JSX代码中使用HTML属性时，尽管看起来像普通的HTML代码，但我们不应忘记正在使用的属性。 因此，此处的外观设计可能与HTML接受的外观不同。 在这种情况下，我们需要一个包含样式说明的常规JavaScript对象。 有了这个想法，我们将上述代码片段重写如下：
<h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1>
因此，不幸的是，我们的代码也不起作用。 执行错误的结果将再次显示错误消息，尽管与上次不同。 现在它报告说，系统可以期望在大括号中找到其他内容。 为了解决此问题，您需要记住我们在上一课中谈到的内容。 即，嵌入在JSX中的JavaScript代码应该用花括号括起来。 我们的代码中已经存在的花括号用于描述对象文字，而不是突出显示JS代码。 让我们解决这个问题：
<h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1>
现在，该组件恰好构成了页面上所需的内容。
组件在页面上显示的风格化文本如果我们决定继续为该文本设置样式怎么办？ 为此，我们需要记住，我们在JS对象中描述了样式，这意味着我们需要向该对象添加其他
: 对。 例如，我们将尝试使用CSS属性
background-color以这种方式设置文本背景的样式，并补充如下代码：
<h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1>
此设计将导致错误消息。 这里的要点是我们使用常规的JS对象描述样式，并且在JavaScript中，变量和对象属性名称（
标识符 ）不能包含“-”符号，即破折号。 实际上，可以通过例如用引号将对象的属性名称引起来来规避此限制，但是在我们的情况下并非如此。 在这种情况下，当CSS属性名称包含破折号时，我们将删除该字符，并在其后的单词的首字母大写。 可以很容易地看出，通过这种方法，CSS属性名称将以驼峰样式编写-就像在JavaScript中一样，习惯上要编写由多个单词组成的变量名称。 重写代码：
<h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1>
让我们看看他的工作成果。
组件在页面上显示的风格化文本在样式文本的过程中，具有样式的对象的代码变得更长。 和他一起工作很不方便。 如果您尝试将此代码分成几行，也不会带来任何好处。 因此，我们将通过创建一个名称为
styles的常量，将对象写入对象并在JSX中使用其名称来从JSX代码中获取具有样式的对象的描述。 结果，我们得到以下信息：
const styles = { color: "#FF8C00", backgroundColor: "#FF2D00" } return ( <h1 style={styles}>Good {timeOfDay}!</h1> )
该代码与上述代码完全相同，但是当有必要向对象添加新样式时，此方法非常方便。 这不会导致组件返回的代码增加。
如您所见，现在CSS属性的值在
styles对象中设置为字符串。 当使用该对象时，值得考虑一些特征，特别是与以数字形式设置其值的属性有关的特征。 例如，这是一个
fontSize属性（类似于CSS中的
font-size ）。 因此，可以以普通数字的形式设置此属性，而不是以引号引起来的字符串形式设置。 例如，以下构造完全有效：
const styles = { color: "#FF8C00", backgroundColor: "#FF2D00", fontSize: 24 }
此处，数字
24将解释为以像素表示的字体大小。 如果需要明确指定度量单位，我们将再次需要使用属性的字符串值。 例如，就对字体大小的影响而言，以下代码片段与上一个片段相似，但此处明确指出了尺寸的度量单位：
const styles = { color: "#FF8C00", backgroundColor: "#FF2D00", fontSize: "24px" }
在这里，我们以像素为单位表示大小，但是如果需要，可以在类似设计中使用其他单位。
说到内置样式，不能不提及这种方法的局限性。 因此，如果您需要在样式中添加
浏览器前缀 ，则比添加其他样式要困难一些。 但是不支持
伪类之类的东西，例如
:hover 。 如果您在精通React的现阶段需要它，那么最好利用CSS类对元素进行样式化。 而且在将来，使用诸如
样式组件之类
的专用库来实现此目的可能会最方便。 但是目前，我们将限制自己使用CSS类来内联样式和样式元素。
也许在了解了内联样式的这种限制之后，您可能会想知道，如果CSS类可以达到相同的效果并具有更广泛的功能，为什么应该使用它们。 在React中使用内联样式的原因之一是可以动态生成此类样式。 而且，将通过JavaScript代码确定该样式或样式。 我们重写示例，以使文本的颜色根据一天中显示消息的时间而改变。
这是使用动态样式形成的完整组件代码。
function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = { fontSize: 30 } if (hours < 12) { timeOfDay = "morning" styles.color = "#04756F" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" styles.color = "#2E0927" } else { timeOfDay = "night" styles.color = "#D90000" } return ( <h1 style={styles}>Good {timeOfDay}!</h1> ) }
请注意，
styles常量声明现在位于
if块之前。 在定义样式的对象中，仅设置题字的字体大小
30像素。 然后，将
color属性添加到对象，其值取决于一天中的时间。 回想一下，我们谈论的是一个完全普通的JavaScript对象，此类对象在创建后支持添加和更改属性。 样式形成后，将在显示文本时应用。 为了快速测试条件语句的所有分支，可以在初始化
date常量时将所需的日期和时间传递给
Date类型的构造函数。 例如，它可能看起来像这样：
const date = new Date(2018, 6, 31, 15)
严格来说，所有这些的含义是动态数据可以影响由组件形成的元素的外观。 这为开发人员带来了巨大的机会。
总结
今天，我们讨论了内置样式，它们的功能和局限性。 在下一课中，我们将继续研究TODO应用程序，并开始了解组件的属性以及最重要的React概念。 因此，建议继续学习本课程的每个人在继续学习之前，如何重复所有内容并尝试我们到目前为止所分析的所有内容。
亲爱的读者们！ 如果您精通React开发，请告诉我们您使用哪些库来设计组件样式。
