React Css 四种引入方式

React CSS

内联样式

优点

样式之间不会有冲突
可以动态获取组件中state的值

缺点

要使用驼峰标识
部分样式没有很友好的提示
如果大量去写内敛样式容易造成代码混乱
伪类和伪元素无法编写

react 复制代码

class HighCom extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            color: 'red',// 改动这里看结果
            fontSize: '30px'
        }
    }
    render() {
        const { color, fontSize } = this.state
        return (
            <div style={{ color, fontSize }}>
                内联样式
            </div>
        )
    }
}

单独文件css 组件引入

写一个单独的css引入
类似于传统的网页编写
多人合作会造成类名冲突且相互影响

css模块化

使用

.css/.less/.scss 都需要在前面加上module.css/.less/.scss
在组件中引入import myCss from './index.module.css'
在组件中使用 <div className={myCss.className}> css 模块化</div>

优点

解决了React中css局部作用域的问题

缺点

引用的类名不能使用-链接符号如.box-title 这在js中是不识别的
所有的className 都需要style.className 来写
不方便动态修改样式还是需要内联去修改

react 复制代码

import React, { PureComponent } from 'react'
import myCss from './index.module.css'

class HighCom extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            color: 'red',// 改动这里看结果
            fontSize: '30px'
        }
    }
    render() {
        // const { color, fontSize } = this.state
        return (
            <div className={myCss.textStyle}> css 模块化</div>
        )
    }
}

export default HighCom

css 复制代码

.textStyle {
    color: royalblue;
}

React使用less

修改webpack配置

npm run eject
npm install @craco/craco craco-less less 推荐使用

最外层新建craco.config.js内容如下：

js 复制代码

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' }, // 可以在此修改默认的主题变量
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};

修改package.json

json 复制代码

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

Css in JS styled-components库

介绍

CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等;
虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点，

安装

npm install styled-components
安装vscode插件 vscode-styled-components

基础使用

js 复制代码

 import styled from "styled-components";
 
 export const Container = styled.div`
 .title{
     font-size: 36px;
     font-weight: 600;
     color: yellow;
 }
 `

react 复制代码

 import React, { PureComponent } from 'react'
 import { Container } from './style.js'
 class HighCom extends PureComponent {
     render() {
         return (
             <Container>
                 <div className='title' > css in js </div>
             </Container>
         )
     }
 }
 export default HighCom

继承

js 复制代码

import styled from "styled-components";
export const Container = styled.div`
    font-size: 36px;
    font-weight: 600;
    color: yellow;`
export const Container2 = styled(Container)`
	width:100px
`
//Container2 会继承Container里的样式

属性传递

组件中

react 复制代码

import React, { PureComponent } from 'react'
import { Container } from './style.js'
class HighCom extends PureComponent {
    render() {
        return (
            <Container fontSize={30}>
                <div className='title' > css in js </div>
            </Container>
        )
    }
}
export default HighCom

css in js

js 复制代码

import styled from "styled-components";

export const Container = styled.div`
.title{
    font-size: ${props=>props.fontSize}px;
    font-weight: 600;
    color: yellow;
}

设置默认值

js 复制代码

import styled from "styled-components";

export const Container = styled.div.attrs(props=>({titleColor:props.color||"red"}))`
.title{
    font-size: ${props=>props.fontSize}px;
    font-weight: 600;
    color: ${titleColor};
}`