react antd动态样式实现

news2024/9/27 12:17:23
<Row>
    <Col style={{ marginBottom: '30px' }} >
         <a className="labelstyle" style={{ padding: fundType.length < 1 ? '0px' : '5px', marginRight: fundType.length < 1 ? '0px' : '10px' }}  >{fundType}</a>
         <a className="labelstyle" style={{ padding: orderSellerType.length < 1 ? '0px' : '5px', marginRight: orderSellerType.length < 1 ? '0px' : '10px' }}  >{orderSellerType}</a>
    </Col>
</Row>

使用<a>组件的背景:

想给业务流量加标签,使用动态样式后最终实现如下:

 如果不使用动态样式时:

<Row>
    <Col style={{ marginBottom: '30px' }} >
         <a className="labelstyle">{fundType}</a>
         <a className="labelstyle">{orderSellerType}</a>
    </Col>
</Row>
:global {
    .labelstyle{
      color: white;
      background-color: #1890ff;
      margin-bottom: 30px;
      border-radius:10%;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
}

当<a>组件展示的变量为null或者空时,页面样式如下:

 

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

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

相关文章

Gitlab 双重认证和访问令牌的使用

目录 引言 1、双重认证让项目只能使用访问令牌克隆 2、创建项目访问令牌 3、创建群组访问令牌 引言 双重认证可以提高用户账户的安全性&#xff0c;防止密码泄露&#xff0c;他人随意登录。 访问令牌就相当于项目或群组的访问密码&#xff0c;有了它就可以克隆项目。同时访…

作为一名python开发者,想要兼职接单,需要学那些技术?要达到什么水准?为什么要学这些技术?

作为一名Python开发者&#xff0c;学习并且兼职接单可以创造更多的机会和收入。要成为一名具有竞争力的兼职Python开发者&#xff0c;需要学习一系列的技术&#xff0c;并达到一定的水准。本文将详细分析兼职Python开发者需要学习的技术、所需达到的水平&#xff0c;以及为什么…

JavaScript引爆Salesforce职业生涯!抓住高薪机会

Salesforce是一款领先的CRM软件&#xff0c;已被各种规模和行业的企业使用多年。Salesforce不仅易于使用&#xff0c;而且可定制&#xff0c;使企业能够改善其销售、营销、客户服务和其他业务流程。 近年来&#xff0c;Salesforce一直在创新&#xff0c;从传统的基于Oracle的平…

电脑键盘点击记录

这里写自定义目录标题 通过敲击键盘&#xff0c;记录键盘按键&#xff0c;并记录下来&#xff0c;保存在电脑一个路径下&#xff0c;txt文档格式记录 通过敲击键盘&#xff0c;记录键盘按键&#xff0c;并记录下来&#xff0c;保存在电脑一个路径下&#xff0c;txt文档格式记录…

Vue3+VueCli+TS官方模板简析

使用脚手架安装相关依赖 使用vueCli 安装预设的vuextslessrouter ## 查看vue/cli版本&#xff0c;确保vue/cli版本在4.5.0以上 vue --version## 安装或者升级你的vue/cli npm install -g vue/cli## 创建 vue create vue3_cli_ts_htgl //create vue3_cli_ts_htgl为自…

分布式数据模型详解:OldSQL => NoSQL => NewSQL

前言 本文隶属于专栏《大数据理论体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据理论体系 思维导图 OldSQL OldSQL 通常是在与 NoSQL 数据库相…

sap ui5 list单选列表

<Listitems"{path: }"mode"SingleSelectLeft"selectionChange""includeItemInSelection"true"><StandardListItem title""/></List>

泰迪云课堂在线实习项目介绍

在线实习项目既可以提高学生学习实践能力&#xff0c;也可以缓解学校实训培养压力&#xff0c;还可以让学生在校期间获得在线实习证明。除此之外&#xff0c;学习在线实习项目&#xff0c;学生也可以提早接触社会&#xff0c;为未来就业打好基础。 新零售|无人智能售货机…

【自由下落物体图像】物体从高空自由下落时的图像对比

自由落体两种情况分析 图像一&#xff1a;速度与时间的图像 当自由物体下落时&#xff0c;我们会得到如下的速度V和时间t的图像。 import matplotlib.pyplot as plt import math plt.rc("font",familyYouYuan) plt.rcParams[axes.unicode_minus]False # 定义常量…

【因特网】网络杂谈(3)之你真的了解因特网吗?

涉及知识点 什么是因特网&#xff0c;因特网简介&#xff0c;如何接入因特网&#xff0c;我国的因特网&#xff0c;因特网怎么接入&#xff0c;非对称数字用户环路&#xff0c;公共交换电话网&#xff0c;综合业务数字网&#xff0c;几种接入因特网的方式&#xff0c;深入了解…

2023 MWC上海展开幕:联想集团首次大规模亮相3S全栈能力

6月28日&#xff0c;亚洲最具影响力的2023上海世界移动通信大会&#xff08;2023 MWC上海&#xff09;正式开幕。联想集团作为中国主力智能解决方案服务商&#xff0c;以“全栈智能 融合成长”为主题&#xff0c;首次大规模亮相基于新IT架构的3S&#xff08;智能设备、智能基础…

通付盾发布UIAM白皮书,利用区块链、大模型AI,以及无证书分布式身份认证赋能工业互联网

简介 UIAM白皮书结合各行业与国内外IAM发展状况&#xff0c;对IAM发展历程、核心能力以及现代增强型IAM技术的演进路线进行探讨。探索身份和信息安全管理与区块链、大模型AI、无证书分布式身份认证等技术趋势&#xff0c;以及UIAM技术在工业互联网的应用。期望能够帮助企业组织…

【NOSQL数据库】Redis数据库的配置与优化

目录 一、关系型数据库与非关系型数据库1.1关系型数据库1.2非关系型数据库1.3关系型数据库与非关系型数据库的区别1.3.1数据存储方式不同1.3.2扩展方式不同1.3.3对事务性的支持不同 1.4非关系型数据库产生的背景1.5总结 二、Redis简介2.1Redis的优点2.2使用场景2.3哪些数据适合…

【FPGA】Verilog:时序电路 | 触发器电路 | 上升沿触发 | 同步置位 | 异步置位

前言&#xff1a;本章内容主要是演示Vivado下利用Verilog语言进行电路设计、仿真、综合和下载 示例&#xff1a;触发器电路 ​ 功能特性&#xff1a; 采用 Xilinx Artix-7 XC7A35T芯片 配置方式&#xff1a;USB-JTAG/SPI Flash 高达100MHz 的内部时钟速度 存储器&#xff1a;…

java图书管理系统

图书管理系统 演示视频 技术&#xff1a; 基于java图书管理系统系统的设计与实现 运行环境&#xff1a; JAVA版本&#xff1a;JDK1.8 IDE类型&#xff1a;IDEA、Eclipse都可运行 数据库类型&#xff1a;MySql&#xff08;8.x版本都可&#xff09; 硬件环境&#xff1a;Window…

USB Mass Storage Class

编辑博客时&#xff0c;回车的意思是切换段落&#xff0c;shift回车才是换行。 SCSI Interface Controller: AMD am5380 1 U盘量产工具 - 主控芯片私有的SCSI命令 ChipEasy / ChipGenius FlashGenius MyDiskTest HS握手时&#xff0c;Chirp KJ的频率大概是10KHz。 2 SCSI CDB 2…

呼叫中心系统经常被UDP攻击的解方法

针对语音系统经常被攻击&#xff0c;或者盗打&#xff0c;可使用防火墙和入侵检测系统来监视和阻止潜在攻击。 为此开发了网页版本web防火墙插件&#xff0c;其原理是&#xff0c;用java程序控制iptables 或firewall放行规则。 shell脚本安装完成插件后&#xff0c;防火墙默认…

VS2022附加到Unity之后控制台报错乱码,重启unity可以正常运行,但是VS不能附加Unity

错误描述 VS2022附加到Unity之后Unity 报错乱码&#xff0c;但是Unity关闭重新开始运行不会报错。错误信息如下 ϵͳ&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ָ&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd…

人工智能(AI)在金融行业的应用

人工智能&#xff08;AI&#xff09;技术在金融行业的应用日益广泛&#xff0c;为金融机构提供了更高效、更智能的解决方案。以下和大家分享AI在金融行业的一些主要应用&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0…

【Java基础学习打卡13】Java开发工具

目录 前言一、主流IDE1.Eclipse&#xff08;免费&#xff09;2.IDEA&#xff08;收费&#xff09; 二、何时使用IDE&#xff1f;三、EditPlus四、EditPlus集成java编译运行命令1.集成javac&#xff08;编译&#xff09;命令2.集成java&#xff08;运行&#xff09;命令3.集成后…