主要三种设置方式: 行内、classnames、模块化、styled-components
1 设置css行内样式
注意样式名称如果按照正常的css来写要加引号,如果写成注入fontSize可以不用加,但是属性值一定要加引号,最后外层要使用双大括号
格式:
{{fontSize:"200px"}}
import React, { Component } from 'react'
export default class Cssline extends Component {
render() {
return (
<div style={{fontSize:'100px',color:"red"}}>
hello world
</div>
)
}
}
2 模块化设置样式:
要注意css文件的命名格式: test.module.css
通过这种方式加入的样式,会自动在样式名后加入一段随机字母
import React, { Component } from 'react'
import common from './test.module.css'
export default class Cssline extends Component {
render() {
return (
<div style={{fontSize:'100px',color:"red"}}>
hello world
<h1 className={common.good}>ddddd</h1>
</div>
)
}
}
3 维护一个状态来调用css样式
import React, { Component } from 'react'
export default class State extends Component {
// 在state中添加一个样式对象
constructor(){
super();
this.state={
styleObj:{
fontSize:'100px'
}
}
}
render() {
// 这里return后面加了小括号,主要为了多条语句书写方便以及正常显示
return (
// 调用状态
<div style={this.state.styleObj}>
test
</div>
)
}
}
4 直接引入css样式
import React, { Component } from 'react'
// 引入外部的css文件
import "./b.css"
export default class Cssone extends Component {
render() {
return (
// 这里的success error 代表样式名称
<div className='success'>
行内样式
<h1 className='error'>error</h1>
</div>
)
}
}
5 利用插件classnames
首先安装插件clssnames
npm i classnames
我们利用它可以实现按条件渲染内容
import React, { Component } from 'react'
// 引入插件
import classNames from 'classnames'
// 引入样式
import styles from './style.css'
// 绑定样式
let cx = classNames.bind(styles);
export default class Classns extends Component {
render() {
// good 和 lower 代表绑定的样式中的属性,通过布尔值判断显示状态
let names = cx({
good:false,
lower:true
})
return (
<div>
<h1 className={names}>SSS</h1>
</div>
)
}
}
6 styled-commponents是针对React的一套css-in-js框架,可以是实现在js中写css代码
安装:
npm i styled-components
下面介绍简单的使用,其它使用方法可以去官网查阅
定义一个js文件:
import React from 'react'
import styled from 'styled-components'
// 定义所需的样式
const Container = styled.div`
width:200px;
height:200px;
background:yellow;
font-size:50px
`
// 别忘记导出
export{
Container
}
在其它组件中调用它:
import React, { Component } from 'react'
// 解构出样式
import {Container} from './Stycom'
export default class Stylecomponents extends Component {
render() {
return (
// 直接作为一个组件调用,可以传参
<Container>
hello
</Container>
)
}
}
可以发现这种方式最终生成的样式名称是一个随机的字符串
也可以动态传值到js文件中,可以通过下面这种方式来接收数据
background:${props=>props.background};
在react中样式的设置方式基本就这么多,个人建议:如果涉及到按条件渲染,可以选择classnames插件;如果涉及动态传值渲染,可以选择styled-components。其它几种方式按需使用