一、编写方式★★★

1.内联样式

内联样式是官方推荐的一种css样式的写法:
- style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串;
- 并且可以引用state中的状态来设置相关的样式;
内联样式的优点:
- 1.内联样式,样式之间不会有冲突
- 2.可以动态获取当前state中的状态
内联样式的缺点:
- 1.写法上都需要使用驼峰标识
- 2.某些样式没有提示
- 3.大量的样式,代码混乱
- 4.某些样式无法编写(比如伪类/伪元素)

export class App extends PureComponent {
  render() {
    return (
      <>
        <div style={{color:"red"}}>内联样式</div>
      </>
    )
  }
}

2.css文件引入

编写到一个单独的文件，之后再进行引入。
缺点：这种编写方式最大的问题是样式之间会相互层叠掉

import React, { PureComponent } from 'react'
import "./App.css"
class Son extends PureComponent {
  render() {
    return (
      <>
        <div className="div">我是子组件会被受影响</div>
      </>
    )
  }
}
export class App extends PureComponent {
  render() {
    return (
      <>
        <div className="div">
          引入文件
          {/* 缺点：这里子组件类名一致会受影响 */}
          <Son />
        </div>
      </>
    )
  }
}
export default App
//App.css文件
//.div{
//  color: #fe4;
//  font-size: 26px;
//}

3.css modules

css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。
- 如果在项目中使用它，需要自己来进行配置，比如配置webpack.config.js中的modules: true等
React的脚手架已经内置了css modules的配置:.
- .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等;
- 之后就可以引用并且进行使用了:
缺点:
- 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的;
- 所有的className都必须使用{style.className} 的形式来编写:
- 不方便动态来修改某些样式，依然需要使用内联样式的方式，

App.module.css文件

.div{
  color: #fe4;
  font-size: 26px;
}

Son.module.css文件

.div{
  color: red;
  font-size: 60px;
}

import React, { PureComponent } from 'react'
import Appstyle from './App.module.css'
// 单独拆分始
import SonStyle from './Son.module.css'
class Son extends PureComponent {
  render() {
    return (
      <>
        <div className={SonStyle.div}>我是子组件不会受影响</div>
      </>
    )
  }  
}
// 单独拆分末


export class App extends PureComponent {
  render() {
    return (
      <>
        <div className={Appstyle.div}>
          引入文件
          <Son />
        </div>
        
      </>
    )
  }
}

export default App

4. less 编写方式

我们可以新建一个.less文件来进行编写引入在页面中

2.要对 create-react-app 的默认配置进行自定义，这里我们使用 craco（一个对 create-react-app 进行自定义配置的社区解决方案）。

现在我们安装 craco 并修改 package.json 里的 scripts 属性。
$ npm add @craco/craco
/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}
然后在项目根目录创建一个 craco.config.jsCRACO 配置文件用于修改默认配置。
  my-app
  ├── node_modules
+ ├── craco.config.js
  └── package.json
3.然后安装 craco-less 并修改 craco.config.js 文件如下。
$ yarn add craco-less
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};
重新运行npm run start

二、Css in Js ★★★

'CSS-in-JS”是指一种模式，其中 CS5 由 JavaScript 生成而不是在外部文件中定义；其实式就是一种将样式(CSS)也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态
此功能并不是 React 的一部分，而是由第三方库提供;
React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法；React有被人称之为 All in JS
CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等
虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点;
流行的库

styled-components

使用安装

npm install styled-components

普通示例

import React, { PureComponent } from 'react'
import { AppWrapper } from './AppStyle'
export class App extends PureComponent {
  render() {
    return (
      <AppWrapper>
        <div className='title'>App</div>
      </AppWrapper>
    )
  }
}

export default App

import styled from 'styled-components'
//AppStyle文件
export const AppWrapper=styled.div`
  .title{
    color:red;
    font-size:30px;
    border:1px solid #eee;
    &:hover{
      background-color:blue;
    }
  }
  .ceshi{
    
  }
`

外部传值，使用箭头函数进行作为参数接收数据

attrs和扩展用法

其他用法可以参考上文官网学习，简单笔记当我们使用这种css in js这种模式编写是非常灵活的，同时搭配模板字符串，将其当作js开发。

classnames

用于动态添加classnames的一个库

npm install classnames

<>
    <div className={classNames("asd",{name:true})}>测试内容</div>
</>

React中CSS编写方式

一、编写方式★★★

1.内联样式

2.css文件引入

3.css modules

4. less 编写方式

二、Css in Js ★★★

styled-components

attrs和扩展用法

classnames