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

React学习（四）——样式设置和CSS文件引入
在学习React框架之前，许多人应该已经熟悉了如何在html文件中使用css样式，这里再作一下说明，CSS样式分为3种形式：
1、内联式（行内样式） 直接在标签内部声明样式

测试文字

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

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

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

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

import React from 'react';

class Page1 extends React.Component{
render(){
return(

This is Page1!

);
}
}

export default Page1;

使用 npm start 启动项目后，Page1组件显示如下：

下面将来更改

This is Page1!

这一标签的样式，与HTML中不同，在React项目中添加css样式的写法如下：

This is Page1!

查看上方语句，style=后面跟着的是两对大括号，与原本的style=" color:red; font-size:16px "不同。而且样式名称的命名方式也有所不同，由本来的 font-size 变成了 fontSize，采用了单驼峰式的命名形式（前面单词小写，后面单词大写开头）其他的样式名称也用同样的方式来更改，比如用 backgroundColor 来替代 background-color。然后把等号右边的 16px 加上了引号，作为一个字符串传入。不同样式字段之间用逗号隔开而不是分号。有些编辑器会自动提示js文件中的样式书写规范，各位也可以参照网上的一些资料。

现在通过这一方式来对Page1页面进行样式修改，代码如下：

import React from 'react';

class Page1 extends React.Component{
render(){
return(

This is Page1!

);
}
}

export default Page1;

为了方面读代码，把这个div标签写成上述形式，良好的代码书写习惯有助于代码理解和维护，怎么看舒服怎么写。
然后，我们来查看 localhost:3000/Page1 （因项目而异）中的内容：

之前写的css样式被应用在了页面上。
那么，还有没有其他方式来引入CSS样式。
我们可以将CSS样式作为一个对象来引入，该对象的属性就对应着CSS样式属性，我们删去上文例子中的样式，创建一个名称为mystyle的对象：

import React from 'react';

class Page1 extends React.Component{
render(){
let mystyle={
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}
return(

This is Page1!

);
}
}

export default Page1;

上面代码中在组件的render函数里创建了一个mystyle对象，属性为CSS样式的内容，在下方标签中的style属性中引入mystyle对象（注意，这里只有一层大括号），页面呈现的内容同样使用了CSS样式：

那么，能否从外部导入CSS文件呢，首先我们在同级目录下创建一个 mystyle.css 文件，内容如下：

#mydiv{
width:200px;
height:80px;
background-color:yellow;
font-size:24px;
text-align:center
}

删去Page1组件中定义的样式，并给

标签添加 id=‘mydiv’：

import React from 'react';
require('./mystyle.css');

class Page1 extends React.Component{
render(){
return(

This is Page1!

);
}
}

export default Page1;

保存两个文件后，就可以在页面中看到CSS样式生效的内容：

现在我们使用三种方式在React项目中使用CSS样式，除此之外，还有许多其他的方式也可以引入CSS样式，甚至可以直接在根html文件中引入，这里就不做太多介绍。个人学习心得，