React-样式

1. 元素中不可以存在多个className、style属性，不会自动拼接
2. 在样式中，使用驼峰命名法，或者使用-连接并使用引号引起来
3. 多个类使用可以{}，里面进行字符串拼接，或者使用数组[].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')
)