在react中写css、css模块化

---

1、使用内联样式

---

这种方式用的很少，也不是完全用不到，很简单

<button style={{background: 'red', color: '#fff', zIndex: 100}} onClick={this.btnClick}>按钮</button>

外面的{}表示要开始写js了，里面的{}表示样式对象

注意：在内联样式中，如果是数值类型的样式就不用加''了，比如z-index: 100等，字符串类型的需要加，多个样式中间用,分割；像line-height、z-index这种的样式，-后面的首字母要大写：lineHeight, zIndex

加入一个内联样式中样式多了，显得代码不美观也不容易看，可以单独的抽离出来一个对象，就像这样

import React, { Component, Fragment } from 'react'
const style = { background: 'red', color: '#fff', zIndex: 100, width: '100px', height: '30px', lineHeight: '30px' }

class TodoList extends Component {
    render() {
        return (
            <Fragment>
                <button style={style}>按钮</button>
            </Fragment>
            
        )
    }
}


export default TodoList

或者也可以这样

import React, { Component, Fragment } from 'react'

const style = {
	btnStyle: { background: 'red', color: '#fff', zIndex: 100, width: '100px', height: '30px', lineHeight: '30px' },
	inputStyle: {fontSize: '30px', color: '#333'}
}
const 

class TodoList extends Component {
    render() {
        return (
            <Fragment>
               <input placeholder="请输入内容" style={style.inputStyle} />
                <button style={style.btnStyle}>按钮</button>
            </Fragment>
            
        )
    }
}


export default TodoList

用es6的导出语法，单独导出一个js文件，然后引入也可以

css.js

export default {
	btnStyle: { background: 'red', color: '#fff', zIndex: 100, width: '100px', height: '30px', lineHeight: '30px' },
	inputStyle: {fontSize: '30px', color: '#333'}
}

然后在用到的页面中引入

import React, { Component, Fragment } from 'react'
import style from '../css.js'

class TodoList extends Component {
    render() {
        return (
            <Fragment>
               <input placeholder="请输入内容" style={style.inputStyle} />
                <button style={style.btnStyle}>按钮</button>
            </Fragment>
            
        )
    }
}


export default TodoList

---

2、使用css样式表的方式（class类名+css模块化）

---

首先在src目录下新建一个css的文件夹用来存放我们的css文件，随便新建一个css文件

里面随便写点样式

然后在对应的组件文件中引入这个css文件

import './css/TodoList.css'

比如我现在想要给button按钮加上这个颜色，就这样写：className='对应css文件的class名'

<input value={this.state.inputVal} onChange={this.inputValChange} type="text" placeholder="请输入内容" />
<button style={{background: 'red', color: '#fff'}} onClick={this.btnClick}>按钮</button>
 <button className='btn'>按钮2</button>

这样就ok了

那么这样的话就有个问题了，在A组件引入了一个css文件，我想只对A组件生效，但是对A组件中的B组件也生效了

--------------------------------------------------------------分割线--------------------------------------------------------------------------

我只想让A组件中文字颜色变，现在这2部分的内容颜色都一样了，这咋办,vue中我们可以使用scope来限制，react中咋搞。这里就要用到webpack的一个插件了，叫css-loader，推荐配合style-loader一起使用

1、首先安装一下这两个插件：npm i style-loader css-loader D

2、安装完成后我们在webpack.config.js中的module找到rules配置一下，在css-loader有个参数叫modules，在npm的css-loader文档中有这个介绍：css-loader文档

配置代码

module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          // 开启模块化
          modules: true,
          //自定义类名配置
          localIdentName: '[local]__[name]--[hash:base64:5]'
        }
      }
    ]
  }

我的react项目是用6官方的脚手架创建的，所以在脚手架上有，只需在对应的.css文件前面加上module就好了

引入的时候就要这样引入了

然后使用的话直接是obj.类名

这样的话，就只对该组件内的类名生效了

---

3、css模块化

---

在第二点中我们使用了css-loader通过配置webpack.config.js来进行模块化，如果我有一个样式不想被模块化，想要全局都用得到这时候就要用到.global了

使用：

css中：

.btn{
    background-color: aqua;
    color: blue;
}
.ccc{
    font-size: 30px;
    font-weight: bold;
    color: chocolate;
}
/* :global(.不想被模块化的类名) */
:global(.aaa){
    color: red;
    font-style: italic;
}

react中这样写（记得引入css文件）

这里的.aaa是你不希望被模块化的类名，'aaa’就是你用到的类名，后面用空格拼接

 <h1 className={[obj.aaa,'aaa'].join(' ')}>这是评论列表组件</h1>

还有一种最简单的，脚手架都已经将我们配置好了

只需要在.css加一个.module就好了，webpack在打包的时候会自己帮我们处理