IntelliJ IDEA教程 服务注册中心 数据算法 SQLMAP list image jquery对象 linux超级用户 python转16进制 short几个字节 bootstrap单选按钮 升级python版本 matlab取实部 python网络编程 python操作mongodb java包 java时间 java中的多态 java基础代码 java字符串比较 java常用数据结构 linuxls命令 linux系统如何安装 嵌入式linux驱动程序设计从入门到精通 asp建站系统 qq飞车剧情辅助 系统集成项目管理工程师教程 vbs编程教学 电视免费软件 firework下载 fireworks8 c4d文字 c语言幂函数 bilibili硬币 轮播图代码 ps阵列 fabfilter 软件工程pdf python去掉空格 樱牛在哪
当前位置: 首页 > 学习教程  > 编程语言

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

2020/8/31 13:16:22 文章标签:

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>
        )
    }
}

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


本文链接: http://www.dtmao.cc/news_show_150064.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?