React Css 四种引入方式

React CSS

内联样式

优点

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

缺点

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

class HighCom extends PureComponent {constructor(props) {super(props)this.state = {color: 'red',// 改动这里看结果fontSize: '30px'}}render() {const { color, fontSize } = this.statereturn (<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 来写

• 不方便动态修改样式 还是需要内联去修改

• 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.statereturn (<div className={myCss.textStyle}> css 模块化</div>)}
  }export default HighCom
  

• .textStyle {color: royalblue;
  }
  

React使用less

• 修改webpack配置

  • npm run eject

  • npm install @craco/craco craco-less less 推荐使用

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

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

  • 修改package.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

基础使用

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

 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

继承

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里的样式

属性传递

• 组件中

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

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

• 设置默认值

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};
}`