JSX样式处理（六）——2种写法：基于class类控制样式 & 基于Style控制样式（行内样式）

最新推荐文章于 2024-04-25 09:41:53 发布

viceen

最新推荐文章于 2024-04-25 09:41:53 发布

阅读量4k

点赞数

分类专栏： react知识文章标签： css js reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/112343493

版权

react知识专栏收录该内容

54 篇文章 1 订阅

订阅专栏

JSX样式处理——2种写法：基于class类控制样式 & 基于Style控制样式（行内样式）

class样式

使用className类处理样式

let element = <div className='active bg'>测试样式</div>

style样式

使用style属性处理样式

// 行内样式不可以直接按照原始的方式来写，只能用如下的方式
let obj = {
  color: 'orange',
  backgroundColor: 'lightblue'
}
// let element = <div style={obj}>测试样式</div>
let element = <div style={{color: 'yellow', border: '1px solid blue'}}>测试样式</div>

文件结构

在这里插入图片描述

公共html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  <!-- 第一步：引入相关js库文件 -->
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <!-- babel文件的作用：编译React代码，使之变成原生js代码才可以在浏览器中运行 -->
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>

<body>
  <!-- 第二步：页面中需要提供一个容器 -->
  <div id="root"></div>
  <!-- 第三步：可以基于React实现前端功能 -->
  <script type="text/babel" src="./js/07-JSX样式处理.js"></script>
</body>

</html>

在VScode中，在VScode中打开，需安装插件Live Server，右键打开Open With Live Server,打开页面

js文件夹同层级新建style文件夹，其下新建文件style.css

实例01-类控制样式

style.css文件

.active {
  color: red;
}

.bg {
  background-color: #eee;
}

js文件

/*
  JSX 样式处理
  1、基于类控制样式
  2、基于Style控制样式（行内样式）
*/

let element = (
  <div>
    <div className='active bg'>基于class的样式</div>
  </div>
)

ReactDOM.render(element, document.getElementById('root'))

显示

在这里插入图片描述

实例021-基于Style控制样式（行内样式）-推荐

style.css文件,同上

js文件

/*
  JSX 样式处理
  1、基于类控制样式
  2、基于Style控制样式（行内样式）
*/

let styles = {
  color: 'blue',
  border: '1px solid orange'
}

let element = (
  <div>
    <div className='active bg'>基于class的样式</div>
    {/* 这里是JSX元素内部的注释 */}
    {/*行内样式不可以按照如下方式编写代码*/}
    {/*<div style="color: blue;">基于Style的样式</div>*/}
    <div style={styles}>基于Style的样式</div>
    {/* <div style={{color: 'green', background: '#eee'}}>基于Style的样式</div> */}
  </div>
)

ReactDOM.render(element, document.getElementById('root'))

显示

在这里插入图片描述

实例022-基于Style控制样式（行内样式）

style.css文件,同上

js文件

/*
  JSX 样式处理
  1、基于类控制样式
  2、基于Style控制样式（行内样式）
*/

let styles = {
  color: 'blue',
  border: '1px solid orange'
}

let element = (
  <div>
    <div className='active bg'>基于class的样式</div>
    {/* 这里是JSX元素内部的注释 */}
    {/*行内样式不可以按照如下方式编写代码*/}
    {/*<div style="color: blue;">基于Style的样式</div>*/}
    <div style={styles}>基于Style的样式</div>
    <div style={{color: 'green', background: '#eee'}}>基于Style的样式</div>
  </div>
)

ReactDOM.render(element, document.getElementById('root'))

显示

在这里插入图片描述

注意写法，优先选择写法二

viceen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JSX样式处理（六）——2种写法：基于class类控制样式 & 基于Style控制样式（行内样式）

JSX样式处理——2种写法：基于class类控制样式 & 基于Style控制样式（行内样式）class样式使用className类处理样式let element = <div className='active bg'>测试样式</div>style样式使用style属性处理样式// 行内样式不可以直接按照原始的方式来写，只能用如下的方式let obj = { color: 'orange', backgroundColor: 'l
复制链接

扫一扫