react中处理样式的五种方式

react中处理样式的五种方式：

1）行内样式

<h1 style={ {"fontSize":"20px"} }>首页面</h1>

注意：
1)如果CSS中的是中划线命名，需要换成小驼峰命名
2）属性名可以使用双引号包起来，也可以不包
3）style后面要写两个{{}}

2）外部样式

新建一个CSS文件，在JS文件中引入CSS文件

 import "./App.css"

3）CSS的模块化

• CSS的模块化命名必须是xxx.module.css
• xxx.module.css中的代码如下：.

.error{
    color: red;
    font-weight: bold;
}

• 使用：

1、引入import common from "./css/common.module.css"
2、使用 <h1 className={ common.error }>错误信息</h1>

4）根据不同的条件添加不同的样式

参考：https://www.npmjs.com/package/classnames

• 安装：npm i classnames
• 引入：import classNames from "classnames"
• 使用：

import React, { Component } from 'react'
import classNames from "classnames"

// 引入外部样式
import "./App.css"

export default class App extends Component {
    render() {
        let h1Class = classNames({
            'box1':true,
            'box2':true
        })
        return (
           <div className="container">
               <h1 className={ h1Class }>这是一个盒子</h1>
           </div>
        )
    }
}

5）css-in-js

安装：npm i styled-components -S
使用：
1、创建一个Search_style.js的文件夹，代码如下：

 import styled from "styled-components"

// 创建一个 Container 组件,它将渲染一个附加了样式的 <div> 标签
let Container = styled.div`
    width:500px;
    height:500px;
    background:${ (props)=>props.color  };
    font-size:30px;
    h1{
        color:blue
    }
`

export {
    Container
}

2、在需要使用的地方先引入该组件，然后当成标签使用，代码如下：

import React, { Component } from 'react'
import { Container } from "./Search_style"

export default class Search extends Component {
    render() {
        return (
            <Container color='gold'>
                <h1>Helo React~</h1>
            </Container>
        )
    }
}