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

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

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

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

                <div style=" color:red; font-size:16px ">测试文字</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 'react' ;

class Page1 extends React . Component {

render (){

return (

< div >

< div > This is Page1! </ div >

</ div >

);

}

}

export default Page1 ;

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

        

    下面将来更改<div>This is Page1!</div>这一标签的样式，与HTML中不同，在React项目中添加css样式的写法如下：

            <div  style={{ fontSize='16px' }}  >This is Page1!</div>

    查看上方语句，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 (

< div >

< div

style = { {

width: '200px' ,

height: '80px' ,

backgroundColor: 'yellow' ,

fontSize: '24px' ,

textAlign: 'center'

} }

> This is Page1! </ div >

</ div >

);

}

}

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 (

< div >

< div style = { mystyle } > This is Page1! </ div >

</ div >

);

}

}

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组件中定义的样式，并给<div>标签添加 id='mydiv'：

import React from 'react' ;

require ( './mystyle.css' );

class Page1 extends React . Component {

render (){

return (

< div >

< div id = 'mydiv' > This is Page1! </ div >

</ div >

);

}

}

export default Page1 ;

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

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

    下一篇，向服务器请求数据并显示：https://blog.csdn.net/daxiazouyizou/article/details/79773307