第一种是行内样式-style
当常量Re为true时,页面中渲染文字为红色
// 导入react依赖包
import React from 'react'
import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(document.getElementById('root'))
const Re = true
const jsx = <div style={{ color: Re ? 'red' : 'yellow' }}>你好React</div>
root.render(jsx )
第二种为类名-className
// 导入react依赖包
import React from 'react'
import ReactDOM from 'react-dom/client'
//这里要导入css文件
import './base.css'
const root = ReactDOM.createRoot(document.getElementById('root'))
const Re= true
const jsx1 = <div className={Re? 'red' : 'green'}>你好React</div>
root.render(jsx1)
bass.css 文件中的代码
.red {
color: red;
/* background-color: skyblue; */
}
.green {
color: green;
}
代码仅供参考~~~
(我还是一个纯纯小白)