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




    





没有更多推荐了,返回首页