当前位置：首页 > news >正文

React Css 四种引入方式

news 2025/8/4 13:24:24

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