React中的四种样式使用优缺点比较

1.组件化天下下的CSS

css的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方式。
组件化中选择合适的CSS解决方案应该符合以下条件：
1.可以编写局部的css：css具备自己的局部作用域，不会随意污染其他组件内部的样式。
2.可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式。
3.支持所有的css特性：伪类，动画，媒体查询等。
4.编写起来简单方便，最好符合一贯的css风格特点，

2.React中的CSS

3.react中常见的css解决方案（1） 内联样式

优点代码解析：

import React, {
    
     PureComponent } from 'react'

export default class App extends PureComponent {
    
    
    constructor(props){
    
    
        super(props);

        this.state = {
    
    
            H2Color:'blue'
        }
    }

    render() {
    
    

        const Pstyle = {
    
    
            color:'blue',
            textDecoration:'underline'
        }

        return (
            <div>
                <h2 style={
    
    {
    
    fontSize:'50px', color:this.state.H2Color}}>我是标题</h2>
                <p style={
    
    Pstyle}>我是一段文字</p>

                <button onClick={
    
    e => this.changeColor()}>修改h2color为红色</button>
            </div>
        )
    }

    changeColor(){
    
    
        this.setState({
    
    
            H2Color:'red'
        })
    }
}

4.react中常见的css解决方案（2） 普通CSS的写法

单独写一个css文件，在react组件引入

import React, {
    
     PureComponent } from 'react'

import './02.css'

export default class App extends PureComponent {
    
    
   render() {
    
    

        return (
            <div>
               <p>今天天气不错</p>
               <h2>我叫康佳好</h2>
            </div>
        )
    }
}

缺点：多个组件都写css，当元素的class名重合时，会导致css样式表层叠出现渲染问题。

5.react中常见的css解决方案（3） CSS modules

• cssmodules的使用

import React, {
    
     PureComponent } from 'react'

import AboutStyle from './style.module.css'

export default class App extends PureComponent {
    
    
    render() {
    
    
        return (
            <div>
                <h2 className={
    
    AboutStyle.title}>我是about</h2>
            </div>
        )
    }
}

5.react中常见的css解决方案（4） CSS in JS

认识styled-components

安装依赖 styled-components : yarn add styled-components
导入依赖：

import styled from 'styled-components'

styled-components演示：

import React, {
    
     PureComponent } from 'react'

import Home from '../home'

import About from '../about'

//引入styled-components
import Styled from 'styled-components'

const HomeStyle = Styled.div`
    font-size:20px;
    color:red;

    .title{
        color:blue;
        font-size:40px;
    }

    span{
        color:black;

        &.active{
        color:gold;
        }

        /* 伪类 */
        &:hover{
            color:green;
        }

        /* 伪元素 */

        &::after{
            content:'aaa'
        }
    }

    

`


export default class App extends PureComponent {
    
    
    render() {
    
    
        return (
            <HomeStyle>
                <h2 className="title">我是app</h2>
                <p><span className='active'>今天天气不错</span></p>
                <p><span>今天天气不错</span></p>
                <p><span>今天天气不错</span></p>
                <p><span>今天天气不错</span></p>
                {
    
    /* <Home/>
                <About/> */}
            </HomeStyle>
        )
    }
}

####### 真实开发中

• 创建一个style.js 专门用来书写样式
• 举个例子
• style.js文件

//引入styled-components
import Styled from 'styled-components'

export const HomeStyle = Styled.div`
    font-size:20px;
    color:red;

    .title{
        color:blue;
        font-size:40px;
    }

    span{
        color:black;

        &.active{
        color:gold;
        }

        /* 伪类 */
        &:hover{
            color:green;
        }

        /* 伪元素 */

        &::after{
            content:'aaa'
        }
    }

`

• index.js文件

import React, {
    
     PureComponent } from 'react'

import Home from '../home'

import About from '../about'

import {
    
    HomeStyle} from './style'


export default class App extends PureComponent {
    
    
    render() {
    
    
        return (
            <HomeStyle>
                <h2 className="title">我是app</h2>
                <p><span className='active'>今天天气不错</span></p>
                <p><span>今天天气不错</span></p>
                <p><span>今天天气不错</span></p>
                <p><span>今天天气不错</span></p>
                {
    
    /* <Home/>
                <About/> */}
            </HomeStyle>
        )
    }
}

解决动态样式问题

/**

• 1.attr参数可以添加元素本身的属性
• 2.attr中可以自己设置属性
  3.props 会保存HtInput身上的所有属性
  */

import Styled, {
    
     withTheme } from 'styled-components'

/**
 * 1.attr参数可以添加元素本身的属性
 * 2.attr中可以自己设置属性
 * 3.props 会保存HtInput身上的所有属性
 */


const HyInput = Styled.input.attrs({
    
    
   
    placeholder:'kangjiahao',
    type:'password',
    bfont:'30px'
})`
    background-color:red;
    font-size:${
      
      props => props.bfont};
    color:${
      
      props => props.color}
`

export default class App extends PureComponent {
    
    

    constructor(props){
    
    
        super(props);

        this.state = {
    
    
            color:'white'
        }
    }

    render() {
    
    
        return (
            <div>
                用户：<HyInput color={
    
    this.state.color}/>
            </div>
        )
    }
}

但愿平凡的每一天都能过得星光熠熠！