修改 ant design tour 漫游式导航的弹窗边框样式

 一 说明

        应项目要求,调整ant design tour 弹窗边框的样式。tour 原本样式是有遮罩层,因此没有边框看起来也不突兀。原图如下:

但是UI设计是取消遮罩层,并设置边框样式。当 取消 了遮罩层,没有设置边框样式的图片如下:

由上可以看出,不设置边框的tour似乎跟网页页面融合了在一起。因此,就需要设置边框。 设置后的效果如下:

二 实现方式

         最初我试着直接去修改ant design的内部css样式,修改 .ant-tour 的css 样式,但是始终不生效。于是,在反复观看官方文档,发现有一个全局token可以用来设置边框样式,那就是:

 因此,设置代码如下:

    <ConfigProvider
      theme={{
        token: {
          boxShadowTertiary: " 0px 4px 16px 0px red"
        },
      }}
    >
      <Tour open={true} mask={false} steps={step}/>
    </ConfigProvider>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源】加油站管理系统 JAVA+Vue.js+SpringBoot+MySQL

目录 一、项目介绍 论坛模块 加油站模块 汽油模块 二、项目截图 三、核心代码 一、项目介绍 Vue.jsSpringBoot前后端分离新手入门项目《加油站管理系统》&#xff0c;包括论坛模块、加油站模块、汽油模块、加油模块和部门角色菜单模块&#xff0c;项目编号T003。 【开源…

ios 原生项目迁移flutter第一天环境

由于公司已经有第一个吃螃蟹的项目组&#xff0c;我在迁移的时候想着站在巨人的肩膀上&#xff0c;但是搭配环境一定要问清楚对方flutter版本&#xff0c;路径也要安排好&#xff0c;不然就不行。 对着自己的项目照着葫芦画瓢&#xff0c;我刚开始为了配置管理图个方便随便放&…

专为汽车内容打造的智能剪辑解决方案

汽车内容创作已成为越来越多车主和汽车爱好者热衷的活动。然而&#xff0c;如何高效、便捷地将行车途中的精彩瞬间转化为高质量的视频作品&#xff0c;一直是困扰着广大用户的一大难题。美摄科技凭借其深厚的视频处理技术和智能分析能力&#xff0c;推出了专为汽车内容记录而生…

git回退到指定版本,同时提交记录也会删除

第一步&#xff1a; git reset --hard xxx (需要恢复版本的 commit id)第二步&#xff1a;branch_name就是远程分支的名称 git push origin <branch_name> --force

JMeter性能测试:命令行执行

1. 环境准备 安装JMeter http://jmeter.apache.org/ 下载最新版本的JMeter 解压下载的压缩包 配置环境变量 为了更方便地从任何目录运行JMeter&#xff0c;将JMeter的bin目录添加到系统环境变量中。 2. 创建测试计划 在执行命令行测试之前&#xff0c;需要创建一个JMete…

Java绩效考核系统源码 springboot员工绩效考核系统源码

Java绩效考核系统源码 springboot员工绩效考核系统源码-009 源码下载地址&#xff1a;https://download.csdn.net/download/xiaohua1992/89352195 项目介绍 本系统的功能分为管理员和员工两个角色 管理员的功能有&#xff1a; &#xff08;1&#xff09;个人中心管理功能&a…

【ARM 裸机】PLL 时钟配置

直接在上一节的工程上修改&#xff0c;参考 I.MX6ULL 数据手册第十八章&#xff1b; PLL2 的频率固定为 528 Mhz&#xff0c;PLL3 的频率固定为 480 Mhz&#xff0c; 首先初始化 PLL2 的 PFD0~PFD3&#xff0c;寄存器 CCM_ANALOG_PFD_528 用于设置 4 路 PFD 的时钟&#xff0c…

vscode中使用conda虚拟环境

每一次配置环境&#xff0c;真的巨烦&#xff0c;网上的资料一堆还得一个个尝试&#xff0c;遂进行整理 1.准备安装好Anaconda 附带一篇测试教程&#xff0c;安装anaconda 2.准备安装vscode 安装地址&#xff1a;Visual Studio Code 3.创建Conda环境 搜索框搜索Anaconda…

sql注入less8——布尔盲注

sql注入第八关卡是布尔盲注&#xff0c;我们将看不到一般的返回值&#xff0c;只能通过You are in......的消失与否来判断自己输入的字符是否与查询的数据的字符相同&#xff0c;相同则显示You are in......&#xff0c;相反则不显示&#xff0c;如下图所示&#xff1a; 查询语…

Word 中将 LaTex 代码渲染为公式的两种方法

示例代码 \mathscr{F}\left[f_1(t)\cdot f_2(t)\right]\frac1{2\pi}F_1(\omega)*F_2(\omega) 1、用 Word 自带的公式转换 Alt 新建一个公式框&#xff0c;将 LaTex 代码粘贴到公式框中&#xff0c;点击【专用】 2、用 Word 中的 MathType 转换 在 LaTex 代码两端各添加一…

探索切片索引:列表反转的艺术

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;列表反转的挑战 二、切片索引的基本概念 三、切片索引实现列表反转 …

001.数据分析_NumPy

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

使用 Python 编程语言进行供应链分析

前言 要分析一家公司的供应链&#xff0c;我们需要供应链不同阶段的数据&#xff0c;如有关采购、制造、运输、库存管理、销售和客户人口统计的数据。我为这项任务找到了一个理想的数据集&#xff0c;其中包括一家时尚和美容初创公司的供应链数据。 1. 相关数据集 让我们导入…

四川省税务局CDH国产化替代实践

“传统数据仓库对于数据处理时效较低&#xff0c;且无法处理实时增量数据及数据变更&#xff0c;同时&#xff0c;在面对海量税务数据大规模进行查询分析等方面存在一些挑战。我们希望尽快寻找到一款能够替代CDH&#xff0c;并且具备灵活扩展能力的大数据解决方案&#xff0c;以…

关于VFX Graph的学习

关于VFX Graph的学习 转载自我的有道云笔记&#xff0c;目前内容不多&#xff0c;后续如果继续使用会更新。 前言 出于实习工作需要和毕设需要&#xff0c;我开始使用VFXGraph。 以前准备第一批作品集的时候&#xff0c;就简单地使用过&#xff0c;但是只是跟着教程一顿乱连…

采用Java语言开发的(云HIS医院系统源码+1+N模式,支撑运营,管理,决策多位一体)

采用Java语言开发的&#xff08;云HIS医院系统源码1N模式&#xff0c;支撑运营&#xff0c;管理&#xff0c;决策多位一体&#xff09; 是不是网页形式【B/S架构]才是云计算服务? 这是典型的误区! 只要符合上述描述的互联网服务都是云计算服务&#xff0c;并没有规定是网页…

深入了解Linux中的环境变量

在Linux系统中&#xff0c;环境变量&#xff08;Environment Variables&#xff09;是用于配置操作系统和应用程序运行环境的一种机制。它们储存在键值对中&#xff0c;可以控制程序的行为、路径查找和系统配置。本文将深入探讨环境变量的基本概念、常见类型、设置和管理方法&a…

OrangePi AIpro开箱测评

OrangePi AIpro(8T) 香橙派联合华为精心打造&#xff0c;建设人工智能新生态 章节一&#xff1a;引言 1.1 背景 香橙派&#xff08;OrangePi&#xff09;是深圳市迅龙软件有限公司旗下开源产品品牌&#xff0c;迅龙软件成立于2005年&#xff0c;是全球领先的开源硬件和开源软…

阿里云获取nginx头部

k8s 配置 可以修改kube-system/nginx-configuration configmap的方式&#xff0c; compute-full-forwarded-for: “true” forwarded-for-header: “X-Forwarded-For” use-forwarded-headers: “true” https://help.aliyun.com/zh/ack/ack-managed-and-ack-dedicated/user-g…

设计模式13——桥接模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 桥接模式&#xff08;Bridge&a…