React05 样式控制 classnames工具优化类名控制

样式控制 & classnames工具优化类名控制

    • 样式控制
      • 1. 行内样式控制
      • 2. 外部样式控制
    • classnames工具优化类名控制


样式控制

1. 行内样式控制

//定义样式
const style = {color: 'red',fontSize: '30px'
}function App() {return (<div className="App">{/* 行内样式控制 */}<p style={style}>Hello BLU!</p></div>);
}
export default App;

2. 外部样式控制

  • App.js
//导入外部样式
import './index.css';function App() {const clickHandler = (name) => {alert("Hello " + name);}return (<div className="App">{/* class类名样式控制 */}<button className='bluBtn' onClick={() => clickHandler('BLU')}>Click Me</button></div>);
}
export default App;
  • index.css
.bluBtn {color: red;font-size: 20px;font-weight: 600;
}

classnames工具优化类名控制

  • npm 安装依赖
npm install classnames
  • Tab 组件
//导入外部样式
import './index.css';
//引入依赖
import classNames from 'classnames';
//引入useState
import { useState } from 'react';function Tab() {const [type, setType] = useState('');const handleTabClick = (name) => {setType(name);}return (<div><button className={classNames('bluBtn', {active: type === 'A'})} onClick={() => handleTabClick('A')}>Tab A</button><button className={classNames('bluBtn', {active: type === 'B'})} onClick={() => handleTabClick('B')}>Tab B</button></div>);}
export default Tab;
  • index.css
.bluBtn {color: red;font-size: 20px;font-weight: 600;
}
.bluBtn.active {background-color: bisque;
}
  • App.js
import Tab from "./Tab";function App() {return (<div className="App"><Tab></Tab>      </div>);
}
export default App;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

题解:P11248 [GESP202409 七级] 矩阵移动

题目传送门 题目大意 给出一个 n n n 行 m m m 列的只包含 0、1、? 的矩阵&#xff0c;你可以选择至多 x x x 个 ? 改成 1。 设得分为经过的 1 的数量&#xff0c;求从矩阵的 ( 1 , 1 ) (1,1) (1,1) 开始&#xff0c;每次只能向右或向下移动&#xff0c;走到 ( n , m…

Webpack性能优化指南:从构建到部署的全方位策略

文章目录 1、webpack的优化-OneOf2、webpack的优化-Include/Exclude3、webpack优化-SourceMap4、webpack的优化-Babel缓存5、wenbpack的优化-resolve配置6、构建结果分析 webpack优化在现代前端开发中&#xff0c;Webpack已成为模块打包器的事实标准&#xff0c;它通过将项目中…

[ DOS 命令基础 4 ] DOS 命令命令详解-端口进程相关命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

飞书API-获取tenant_access_token

1.在飞书工作台创建应用&#xff0c;跳到开发者后台&#xff0c;选创建企业自建应用 2.设置并发布应用 必须要发布应用才可以开始使用了&#xff01;&#xff01;&#xff01; 3.调用获取token的API 参考链接&#xff1a; 开发文档 - 飞书开放平台https://open.feishu.cn/do…

linux 安装anaconda3

1.下载 使用repo镜像网址下载对应安装包 右击获取下载地址&#xff0c;使用终端下载 wget https://repo.anaconda.com/archive/Anaconda3-2024.02-1-Linux-x86_64.sh2.安装 使用以下命令可直接指定位置 bash Anaconda3-2024.02-1-Linux-x86_64.sh -b -p /home/anaconda3也…

LabVIEW编程过程中为什么会出现bug?

在LabVIEW编程过程中&#xff0c;Bug的产生往往源自多方面原因。以下从具体的案例角度分析一些常见的Bug成因和调试方法&#xff0c;以便更好地理解和预防这些问题。 ​ 1. 数据流错误 案例&#xff1a;在一个LabVIEW程序中&#xff0c;多个计算节点依赖相同的输入数据&#…

【自用】fastapi 学习记录 --请求和参数部分

fastai个人学习笔记 一、模块化结构框架 设置了默认请求头shop之后就无需再app0x里接口函数前全部写上/shop/xxx&#xff0c;或者/user/xxx&#xff0c;他会同意添加~如果都写了就会出现以下的情况&#xff08;重复shop&#xff09;&#xff1a; 二、请求与响应 关于参数&a…

若依入门案例

若依&#xff08;RuoYi&#xff09;框架是一个基于Java的开源企业级快速开发框架&#xff0c;主要用于构建信息管理系统。它结合了多种前端和后端技术&#xff0c;提供了高效的开发工具&#xff0c;并具备以下主要功能&#xff1a; 一、后端功能 技术选型&#xff1a;若依后端…

【Web前端】OOP编程范式

面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称 OOP&#xff09;是一种程序设计思想&#xff0c;它通过将程序视为一组相互作用的对象来设计程序。OOP 提出了一些重要的基本概念&#xff0c;包括类与实例、继承和封装。面向对象编程将系统视为由多个对象…

Mac解决 zsh: command not found: ll

Mac解决 zsh: command not found: ll 文章目录 Mac解决 zsh: command not found: ll解决方法 解决方法 1.打开bash_profile 配置文件vim ~/.bash_profile2.在文件中添加配置&#xff1a;alias llls -alF键盘按下 I 键进入编辑模式3. alias llls -alF添加完配置后&#xff0c;按…

JavaScript 变量声明

const 和 let 都是在 JavaScript ES6 中引入的变量声明方式&#xff0c;它们之间的主要区别在于 是否允许重新赋值 和 作用域。 1. 是否可以重新赋值 let&#xff1a;声明的变量可以在后续代码中被重新赋值。const&#xff1a;声明的变量不能被重新赋值。声明时必须初始化&am…

JavaAPI(1)

Java的API&#xff08;1&#xff09; 一、Math的API 是一个帮助我们进行数学计算的工具类私有化构造方法&#xff0c;所有的方法都是静态的&#xff08;可以直接通过类名.调用&#xff09; 平方根&#xff1a;Math.sqrt()立方根&#xff1a;Math.cbrt() 示例&#xff1a; p…

UI界面设计入门:打造卓越用户体验

互联网的迅猛发展催生了众多相关职业&#xff0c;其中UI界面设计师成为互联网行业的关键角色之一。UI界面设计无处不在&#xff0c;影响着网站、应用程序以及其他数字平台上的按钮、菜单布局、色彩搭配和字体排版等。UI设计不仅仅是字体、色彩和导航栏的组合&#xff0c;它的意…

python查询日志,并组装sql,修复缺失的数据

前言 由于mysql链接超时波动&#xff0c;导致数据缺失&#xff0c;需要根据日志填补数据 流程 获取确实数据的订单列表 搜索日志&#xff0c;获取请求日志 根据请求日志拼装sql 打印sql供修复数据 代码 因为我们日志打印的有问题&#xff0c;所以这里用字符串截取获取入…

利用Stable Diffusion技术,StableVision能够自动生成高质量、高分辨率的图像,满足用户对于图像素材的多样化需求。

1.产品介绍 产品介绍方案 产品名称: StableVision 图像管理分析系统 主要功能: 高精度图像生成智能分类与检索多维度数据分析定制化模板与导出功能介绍: 高精度图像生成: 具体作用:利用Stable Diffusion技术,StableVision能够自动生成高质量、高分辨率的图像,满足用户…

用户信息管理系统烟草种植用户基于SpringBootSSM框架

目录 一. 系统目标 二 需求分析 2.1 功能描述 2.1.1 用户管理 2.1.2 管理员功能 2.1.3 角色与权限管理 2.1.4 详细功能描述 2.1.5安全与权限控制功能 2.1.6系统维护与扩展功能 2.2. 非功能需求 2.3用户角色 2.4技术描述 三、数据库设计 3.1数据库需求分析 3.2数…

std::back_inserter

std::back_inserter 是 C 标准库中的一个函数模板&#xff0c;它用于创建一个插入迭代器&#xff08;insert iterator&#xff09;&#xff0c;这个迭代器可以在容器末尾插入新元素。它定义在 <iterator> 头文件中。 函数原型 template <typename Container> bac…

在 Mac 和 Windows 系统中快速部署 OceanBase

OceanBase 是一款分布式数据库&#xff0c;具备出色的性能和高扩展性&#xff0c;可以为企业用户构建稳定可靠、灵活扩展性能的数据库服务。本文以开发者们普遍熟悉的Windows 或 Mac 环境为例&#xff0c;介绍如何快速上手并体验OceanBase。 一、环境准备 1. 硬件准备 OceanB…

如何有效销售和应用低代码软件?探索其市场机会与策略

随着技术的进步&#xff0c;企业对自动化和数字化的需求日益增加。低代码开发平台应运而生&#xff0c;成为企业实现快速应用程序开发的重要工具。然而&#xff0c;在市场上推广和应用低代码软件并非易事&#xff0c;需要深入了解客户需求&#xff0c;提供定制化的解决方案&…

Docker启动gitlab后22端口被占用如何解决

文章目录 前言Docker启动参数解决方案总结 前言 这两天一直在研究Docker启动gitlab的问题&#xff0c;邮件问题暂时告一段落&#xff0c;当真正开始使用gitlab克隆的时候发现&#xff0c;之前22端口被占用无法启动&#xff0c;我就用2022端口做了一个映射&#xff0c;但是在gi…