1. React中的样式
   React并没有像Vue那样提供特定的区域给我们编写CSS代码
   所以你会发现在React代码中, CSS样式的写法千奇百怪

2. 内联样式

内联样式的优点:

• 内联样式, 样式之间不会有冲突
• 可以动态获取当前state中的状态

内联样式的缺点：

• 写法上都需要使用驼峰标识
• 某些样式没有提示
• 大量的样式, 代码混乱
• 某些样式无法编写(比如伪类/伪元素)

class App extends React.Component{
   
    constructor(props){
   
        super(props);
        this.state = {
   
            color: 'red'
        }
    }
    render(){
   
        return (
            <div>
                <p style={
   {
   fontSize:'50px', color: this.state.color}}>我是段落1</p>
                <p style={
   {
   fontSize:'50px', color:'green'}}>我是段落2</p>
                <button onClick={
   ()=>{
   this.btnClick()}}>按钮</button>
            </div>
        );
    }
    btnClick(){
   
        this.setState({
   
            color: 'blue'
        })
    }
}
export default App;

3. 外链样式

将CSS代码写到一个单独的CSS文件中, 在使用的时候导入进来

外链样式的优点:

• 编写简单, 有代码提示, 支持所有CSS语法

外链样式的缺点：

• 不可以动态获取当前state中的状态
• 属于全局的css，样式之间会相互影响

//Home.tsx文件
import React from 'react';
import './Home.css'
class Home extends React.Component{
   
    render() {
   
        return (
            <div id={
   'home'}>
                <p>我是home段落</p>
                <a href={
   'www.it666.com'}>我是home超链接</a>
            </div>
        )
    }
}
export default Home;

/*Home.css文件*/
#home p{
   
    font-size: 50px;
    color: red;
}
#home a{
   
    color: yellow;
}

4.Css Module

• React的脚手架已经内置了css modules的配置：
  • .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等；
• Css Modules优点
  • 编写简单, 有代码提示, 支持所有CSS语法
  • 解决了全局样式相互污染问题

• Css Modules缺点

  • 不可以动态获取当前state中的状态
    

    

    
    那么怎样解决Css Modules缺点不可以动态获取当前state中的状态的问题呢？
    先来了解一下模板字符串
    拓展点——模板字符串
    ES6中的模板字符串

    const str = `my name is ${
             name}, my age is ${
             age}`;
    console.log(str); // my name is yiya_xiaoshan, my age is 18
    

    除此之外，react中还有一些ES6中没有的特性
    在JS中除了可以通过()来调用函数以外,,其实我们还可以通过模板字符串来调用函数

    function test(...args) {
           
    console.log(args);
    }
    test(1, 3, 5); // [ 1, 3, 5 ]
    test`1, 3, 5`; // [ [ '1, 3, 5' ] ]
    

    通过模板字符串调用函数规律:

• 参数列表中的第一个参数是一个数组, 这个数组中保存了所有不是插入的值

• 参数列表的第二个参数开始, 保存的就是所有插入的值

总结结论
我们可以拿到模板字符串中所有的内容\所有非插入的内容
=>我们可以拿到模板字符串中所有插入的内容
所以我们就可以对模板字符串中所有的内容进行单独的处理

test`1, 3, 5, ${
     name}, ${
     age}`; 
// [ [ '1, 3, 5, ', ', ', '' ], 'yiya_xiaoshan', 18 ]