前端学习（2220）：react之jsx的样式小案例

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css'
import App from './App';
import { tsPropertySignature } from '@babel/types';

//<app/>js的普通对象
/*let app = < App / >
    let root = document.getElementById('root')

    let h1=<h1>helloworld<span>我是</span></h1>
{ ReactDOM.render(
    h1, root
); }*/
//实现时刻的变化
/* function clock() {
    let time = new Date().toLocaleTimeString()
    let element = ( < div > < h1 > 现在的时间 { time } < /h1></div > )
    let root = document.querySelector('#root')
    ReactDOM.render(
        element, root
    )
}
clock()

setInterval(clock, 1000) */

/* function Clock(props) {
    return (

        <
        div >
        <
        h1 > 现在的时间是 { props.date.toLocaleTimeString() } < /h1> <
        h2 > 这是副标题 < /h2> < /
        div >
    )

}

function run() {
    ReactDOM.render( <
        Clock date = { new Date }
        />, document.querySelector('#root')
    )
}

setInterval(run, 1000) */
/* let time = new Date().toLocaleTimeString()
let str = '当前时间是:'
let element = ( <
    div >
    <
    span >
    横着躺着 <
    /span> <
    span >
    竖着躺着 <
    /span></div >
)
let man = "正常"
let element2 = ( < div >
    <
    h1 > 今天是否隔离 < /h1> <
    h2 > {
        man == "发热" ? < button > 隔离 < /button> : element
    } < /h2> </div >
) */

/* ReactDOM.render(
    element, document.querySelector('#root')
) */
let color = 'bgRed'
let element5 = ( <
    div className = { color } >
    红色的背景颜色 <
    /div>
)
ReactDOM.render(
    element5, document.querySelector('#root')
)

app.css

.bgRed {
    background-color: aliceblue
}

运行结果