JSX的样式处理

最新推荐文章于 2023-02-13 17:00:01 发布

m0_63400611

最新推荐文章于 2023-02-13 17:00:01 发布

阅读量283

点赞数

分类专栏： react 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_63400611/article/details/126453752

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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属性,从而添加样式