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

编写CSS的格式

news 2025/6/27 9:53:37

1、内联样式的css

import React, { PureComponent } from 'react'export class App extends PureComponent {constructor() {super()this.state = {fs: 20}}render() {const { fs } = this.statereturn (<div><p style={{ color: 'red', fontSize: `${fs}px` }}>哈哈哈哈哈</p><p style={{ color: 'blue' }}>嘿嘿嘿嘿</p></div>)}
}export default App

2、普通的css写法

Home.jsx

import React, { PureComponent } from 'react'export class Home extends PureComponent {render() {return (<div><p className='title'> 我是 Home.jsx 文件，我的样式是被影响的，<br />因为，<br />用 import 引入的普通css, 样式之间会相互影响。</p></div>)}
}export default Home

App.jsx

import React, { PureComponent } from 'react'
import './App.css'  `【用 import 引入的普通css, 不同组件的样式之间，会相互影响】`
import Home from './Home'export class App extends PureComponent {render() {return (<div><h3 className="title">标题</h3><p className="content">内容哈哈哈哈</p><Home></Home></div>)}
}export default App

App.css

.title {font-size: 32px;color: green;
}.content {font-size: 22px;color: orange;
}

在这里插入图片描述

3、CSS_Moudle写法

css modules 并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的，如果在其他项目中使用，就需要自己进行配置了，比如：配置webpack.config.js中的modules: true。
React的脚手架已经内置了 css modules 的配置，
我们只需要这样做即可：
.css / .less / .scss 等样式文件，修改成，.module.css / .module.less / .module.scss 等
之后 import AppStyle from './App.module.css' 这样引入就行了。
但是这种方案也是有缺陷的，如：
1、引用的类名，不能使用连接符(.home-title)这种形式的，因为在js中不识别
2、所有的className都必须使用{style.className}的形式编写
3、不方便动态修改某些样式，依然需要内联样式进行辅助

App.module.css 文件

.title {font-size: 32px;color: green;
}.content {font-size: 22px;color: orange;
}

App.jsx

import React, { PureComponent } from 'react'
import AppStyle from './App.module.css'
import Home from './Home'export class App extends PureComponent {render() {return (<div><h3 className={AppStyle.title}>标题，我的样式的类名是title</h3><p className={AppStyle.content}>内容哈哈哈哈，我的样式的类名是content</p><Home></Home></div>)}
}export default App

Home.jsx

import React, { PureComponent } from 'react'export class Home extends PureComponent {render() {return (<div><p className='title'> 我是 Home.jsx 文件，我的样式的类名是title<br />因为，<br />本项目使用的 App.module.css 的形式，<br />所以本文件的样式不受影响</p></div>)}
}export default Home

4、css in js（推荐）

variable.js

export const primaryColor = '#ff8800'
export const secondColor = '#ff7788'export const smallSize = '8px'
export const middleSize = '14px'
export const bigSize = '18px'

style.js

import styled from 'styled-components'*使用外部文件提供的变量
import { smallSize } from './variable'*这里涉及到了es6的 标签模板字符串
export const AppWrapper = styled.div`.footer {margin-top: 10px;border: 1px solid red;}
`1、可以接受外部传入的props
2、可以通过 attrs 设置默认值
3、可以使用外部文件提供的变量
export const SectionWrapper = styled.div.attrs(props => {return {tcolor: props.color || 'blue'}
})`border: 1px solid red;.title {/* props.size 的 size 由外部传入 */font-size: ${props => props.size}px;/* 通过 attrs 提供的默认值 */color: ${props => props.tcolor};// 当 .title 处于 hover状态时，背景颜色为紫色&:hover {background: purple;}}.content {/* font-size: 20px; */font-size: ${smallSize}; /* 使用外部变量 */color: green;}
`

App.jsx

import React, { PureComponent } from 'react'
import { AppWrapper, SectionWrapper } from './style.js'export class App extends PureComponent {constructor() {super()this.state = {size: 20,   color: 'yellow'}}render() {const { size, color } = this.statereturn (<AppWrapper>{/* <SectionWrapper size={size} color={color}> */}<SectionWrapper size={size}><h2 className="title">我是标题</h2><p className="content">我是内容</p><button onClick={e => this.setState({ color: 'red' })}>更改颜色</button></SectionWrapper><div className="footer"><p>免责声明</p><p>版权声明</p></div></AppWrapper>)} // end-render
}export default App

5、第三方库 classnames

import React, { PureComponent } from 'react'`引入 classnames库`
import classnames from 'classnames'export class App extends PureComponent {constructor() {super()this.state = {isbbb: false,isccc: true}}render() {const { isbbb, isccc } = this.stateconst classList = ['aaa']if (isbbb) classList.push('bbb')if (isccc) classList.push('ccc')const classname = classList.join(',')return (<div><h2 className={`aaa ${isbbb ? 'bbb' : ''} ${isccc ? 'ccc' : ''}`}>标题哈哈哈哈</h2><h2 className={classname}>呵呵呵</h2>{/* classnames库 的使用 */}<h2 className={classnames('aaa', {bbb: isbbb}, {ccc: isccc})}>嘿嘿嘿嘿</h2><h2 className={classnames(['aaa', {bbb: isbbb}, {ccc: isccc}])}>嘿嘿嘿嘿</h2></div>)} // end-render
}export default App