- 元素中不可以存在多个className、style属性,不会自动拼接
- 在样式中,使用驼峰命名法,或者使用-连接并使用引号引起来
- 多个类使用可以{},里面进行字符串拼接,或者使用数组[].join(’ '),下面详述
添加样式时候直接通过style关键字和{}使用即可
import React from 'react'
import ReactDOM from 'react-dom'
const exampleStyle = {
background: 'skyblue',
borderBottom: '5px solid red'
}
const element = (
<div>
<h1 style={exampleStyle}> hello word</h1>
</div>
)
ReactDOM.render(
element,
document.getElementById('root')
)
添加类的时候注意,React和Vue不一致的地方在于,Vue可以写多个class属性进行拼接,而React不会进行拼接,后写的className会覆盖前面的className
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
const classStr = 'bgRed'
const element = (
<div className={classStr} className={'aaa'}>
<h1>hello word</h1>
</div>
)
ReactDOM.render(
element,
document.getElementById('root')
)
可以通过字符串拼接的方式修改
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
const classStr = 'bgRed'
const element = (
<div className={classStr + ' aaa'}>
<h1>hello word</h1>
</div>
)
ReactDOM.render(
element,
document.getElementById('root')
)
注意,直接放数组也是不行的,vue可以直接放数组,react不行
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
const classStr = ['bgRed', 'aaa']
const element = (
<div className={classStr}>
<h1>hello word</h1>
</div>
)
ReactDOM.render(
element,
document.getElementById('root')
)
可以通过拆分数据,使用join方法
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
const classStr = ['bgRed', 'aaa'].join(' ')
const element = (
<div className={classStr}>
<h1>hello word</h1>
</div>
)
ReactDOM.render(
element,
document.getElementById('root')
)