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
--------------------- 本文来自 技术学者凯文 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/daxiazouyizou/article/details/79758558?utm_source=copy
以上是 React学习（四）——样式设置和CSS文件引入 的全部内容， 来源链接： utcz.com/z/384001.html
