博客

1. 行内样式 — style

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 使用 JSX 创建 React 元素
const title = (
    <div>
      <h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>JS样式处理</h1>
    </div>
)

// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))

2. 类名 — className (推荐)

// 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 引入css
import './css/index.css'

// 使用 JSX 创建 React 元素
const title = (
    <div>
      <h1 className="title" style={{ color: 'red', backgroundColor: 'skyblue' }}>JS样式处理</h1>
    </div>
)

// 渲染 React 元素
ReactDOM.render(title, document.getElementById('root'))

通过引入外部css文件,并且通过类名的形式将导入的类名赋给元素的class属性,从而添加样式