React学习（四）——样式设置和CSS文件引入

大家好，我是凯文，本篇文章介绍在React项目中设置元素样式以及引入CSS文件的方法，供各位参考。

在学习React框架之前，许多人应该已经熟悉了如何在html文件中使用css样式，这里再作一下说明，CSS样式分为3种形式：

1、内联式（行内样式） 直接在标签内部声明样式

<div>测试文字</div>

2、嵌入式（内部样式） 通过标签名、class或id等方法与标签联系起来设置样式

<style type="text/css"> div{width: 60px; } #mydiv{ height: 70px }</style>

3、外联式（外部样式） 通过引入外部文件来设置样式

<link rel="stylesheet" type="text/css" href="mystyle.css" />

但是，在我们的React项目中采用的是虚拟DOM，组件也是放在一个个的JS文件中，所以CSS的使用和引入方式就略有不同。下面通过实例来进行介绍。

首先，通过编辑器进入React项目目录：

这是在之前的文章中搭建完的React项目，各位也可以自行创建。下面的实例将在Page1这个组件中进行。

首先来查看Page1的内容：

import React from eact ;

class Page1 extends React . Component {render (){return (< div >< div > This is Page1! </ div ></ div > ); } }

export default Page1 ;