一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。
前言
大家好呀，我是L同学。在上篇文章中react基础（十四）— fragment和strictMode我们学习了fragment和strictMode的使用。接下来，在这篇文章中，我们将学习react中的css，包括内联样式、普通的css、css modules和styled-components。
1. 内联样式
react官方推荐的css样式的一种写法是内联样式。在元素中，style接收一个javascript对象，而不是css字符串。对象的属性需要采用小驼峰命名。我们还可以在state中定义相关的样式，在jsx中进行引用。
import React, {PureComponent} from 'react'
export default class App extends PureComponent {
constructor(props) {
super(props)
this.state = {
color: 'purple'
}
}
render() {
const PStyle = {
color: this.state.color,
textDecoration: 'underline'
}
return (
<div>
<h2 style={{color: 'red', fontSize: '50px'}}>我是标题</h2>
<p style={PStyle}>我是一段文字描述</p>
</div>
)
}
}
复制代码页面的渲染效果。
内联样式优点：
- 样式之前不会有冲突，样式直接加在某个元素上
- 可以动态获取当前state中的状态
内联样式缺点：
- 写法上都需要使用小驼峰命名标识
- 写得时候没有提示
- 大量的样式，代码混乱
- 某些样式没有办法编写，例如伪类、伪元素
2. 普通的css
我们在写普通css的时候通常会在一个单独的css文件中，然后在页面中进行引入。这样容易造成一个问题，那就是普通的css都属于全局的css，样式之间会相互影响，会相互层叠掉。
3. css modules
css modules并不是react特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用。react脚手架中已经内置了css modules的配置。.css/.less/.scss等样式文件都需要修改成.module.css/.module.less/.module.scss等，然后就可以引用并且使用。
我们把各个组件的css文件都改成.module.css。
在app的style.module.css文件中正常写样式代码。
.title {
color: blue;
}
复制代码在app的index.js文件中引入style.module.css文件并使用。
import React, {PureComponent} from 'react'
import Home from '../home'
import Profile from '../profile'
import appStyle from './style.module.css'
export default class App extends PureComponent {
render() {
return (
<div id='app'>
App
<h2 className={appStyle.title}>我是App的title</h2>
<Home/>
<Profile/>
</div>
)
}
}
复制代码我们可以看到样式可以正常渲染。各个组件的元素class都是不一样的，解决了局部作用域的问题。 css modules也有缺点： （1）引用的类名，不能使用连接符（.home-title），在javascript中识别不出来的 （2）所有的className都必须使用{style.className}的形式进行编写 （3）不方便动态来修改某些样式，依然需要使用内联样式。
4. CSS-in-JS
在react官方文档中说过，‘CSS-in-JS’是一种模式，其中CSS由javascript生成而不是在外部文件中定义。
接下来我们讲解在社区中流行的CSS-in-JS库—styled-components。
首先需要通过yarn add styled-components进行安装。
在讲解styled-components之前，我们先来复习下模板字符串的使用。
模板字符串的基本使用。
const name = 'haha'
const age = 18
const message = `my name is ${name}, age is ${age}`
复制代码这是很多人都知道的模板字符串的使用，但是还有很多人不知道模板字符串还有另外一种用法——标签模板字符串。
标签模板字符串可以通过模板字符串的方式对一个函数进行调用。
我们定义一个函数。
function test(...args) {
console.log(args);
}
复制代码正常情况下，我们都是通过函数名()的方式进行调用。
test('aaa', 'bbb', 'ccc')
复制代码除了正常调用方式外，还可以通过模板字符串的方式进行调用。
test`aaa`
复制代码我们可以看到test函数被正常调用了。 如果我们在调用函数的时候插入其他的变量，会怎么样呢？
test`my name is ${name}, age is ${age}`
复制代码我们来看下打印结果。
我们可以看到模板字符串被拆分了。第一个元素是一个数组，里面存放着被模板字符串拆分的字符串组合。后面的元素时一个个模板字符串传入的内容。
那模板字符串跟styled components有什么关系呢？其实，在styled components中，就是通过这样的方式去解析模板字符串，最终生成我们想要的样式。
关于styled components的使用，我们下篇文章将进行介绍！