前言
由于 React的JSX语法，能在React中使用样式的方式有很多，本文主要介绍在React中经常使用CSS样式的五种方法：
//1行内样式
// 2声明样式
// 3引入样式
// 4 CSS Modules模块化
// 5 Styled-component
1 行内样式
行内样式是一种最基本的写法，也就是我们最开始学HTML时写的内联样式那样，在项目中可能会比较少用到
在JSX中的用法：
class App extends React.Component {
// …
render() {
return (
<div style={
{ background: ‘#eee’, width: ‘200px’, height: ‘200px’}}>
<p style= {
{color:’red’, fontSize:’40px’}}>行内样式</p>
</div>
)
}
}
需要注意的是，这里的css样式名采用驼峰命名法：如font-size →fontSize，并且你需要将CSS属性放在双大括号之间。为什么要用两个大括号？因为在JSX中渲染的JS表达式，它们必须被放在一对大括号里，{style}可以视为一个JS对象。所以第一对大括号正是将JS表达式放入JSX解析，里面的那对大括号则创建了一个style对象实例，所以在这里style是作为一个对象传入组件
2声明样式
声明样式其实是行内样式的一种改进写法，在render函数外部创建style对象，然后传递给组件，让css与标签分离，但实际上样式多了的话还是不太美观
用法：
class App extends React.Component {
//…
const style1={
background:’#eee’,
width:’200px’,
height:’200px’
}
const style2={
color:’red’,
fontSize:’40px’
}
render() {
return (
<div style={style1}>
<p style= {style2}>行内样式</p>
</div>
)
}
}
注意这里实用的还是驼峰命名法，其次因为已经在外部声明了style对象，所以在JSX中使用的时候只需要一个大括号{//..}
3引入样式
引入样式就是将CSS文件写下外部，在引入使用，这种普通的引入样式实际上会有一定的问题，我们先看用法，再分析问题
用法：
css 文件
.person{
width: 60%;
margin:16px auto;
border: 1px solid #eee;
box-shadow: 0 2px 3px #ccc;
padding:16px;
text-align: center;
}
js文件
import React from ‘react’;
import ‘./Person.css’;
class App extends React.Component {
//….
render() {
return (
<div className=’person’>
<p>person:Hello world</p>
</div>
)
}
}
export default App;
结果展示：
问题：
因为CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。那么这个时候就推荐使用CSS Modules 了
4CSS Modules
CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。具体原理可以看看阮一峰老师的博客 CSS Modules 用法教程。
在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS Modules了，详见官网。可见create-react-app对webpack零配置的追求
本段主要讲解create-react-app2.0以上版本的CSS Modules的用法：
局部样式 命名规则: xxx.module.css
引入方式 import xxx from ‘xxx.module.css’
用法：<div className={xxx.styleName}>
全局样式 命名规则: xxx.css
引入方式 import ‘xxx.css’
用法：<div className=’styleName’>
全局样式与局部样式混合使用： <div className={`styleName ${xxx[‘styleName’]}`} > 其中styleName表示全局样式 ${xxx[‘styleName’]表示局部样式，注意{ }内使用模板字符串 · ·
案例：
person.module.css
.person{
width: 60%;
margin:16px auto;
border: 1px solid #eee;
box-shadow: 0 2px 3px #ccc;
padding:16px;
text-align: center;
}
person.js
import React, { Component } from ‘react’;
//局部样式
import styles from ‘./Person.module.css’;
//全局样式
import ‘../App.css’
class App extends Component {
render() {
return (
<div className={styles.person}>
<p className=’fz’>person:Hello world</p>
</div>
)
}
}
export default App;
查看编译后的代码：
可以看到使用了CSS Modules产生的局部样式的样式名经过编译产生了变化，样式名在项目中独一无二，从而产生局部作用域，而全局样式的样式名则没有发生变化
5 Styled Components
随着组件化时代的来临，前端应用开始从组件的层面对 CSS 进行封装：也就是通过 JS 来声明、抽象样式从而提高组件的可维护性；在组件加载时动态的加载样式，动态生成类名从而避免全局污染。Styled Component以组件的形式来声明样式，让样式也成为组件从而分离逻辑组件与展示组件
Styled Component是react的一个第三方库，是CSS in JS 的优秀实践和代表，将CSS写在JS中，可以实现常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在JSX上面，HTML、CSS、JS三者再次内聚，同时也实现H5的语义化标签表现形式。
用法：
安装：
npm install –save styled-components
简单使用：
// 创建一个 Title 组件,它将渲染一个附加了样式的 <h1> 标签
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// 创建一个 Wrapper 组件,它将渲染一个附加了样式的 <section> 标签
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// 就像使用常规 React 组件一样使用 Title 和 Wrapper
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);