React之样式设置和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;



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之样式设置和CSS文件引入

猜你喜欢