react JXL的样式处理

两种方式

1 行内样式style

//导入react
import React from "react";
import ReactDOM from "react-dom";


const title = (
    //行内样式style
    //外层{} 表示要在JXL中嵌入表达式,内层{}表示一个对象
    <h1 style={{
        color:'yellow',
        backgroundColor:'blue'
    }}>
        hello girl
    </h1>)



// 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

效果

*2 类名 className (推荐)

//导入react
import React from "react";
import ReactDOM from "react-dom";

//引入css
import "./index.css"

const title = (
    //使用className
    <h1 className="red" >
        hello girl
    </h1>)


// 渲染react
//参数1:要渲染的元素  参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title, document.getElementById("root"));

 index.css

.red{
  color:red;
  text-align: center;
}

效果