react antd 样式修改

最近在做一个大数据的大屏ui更改，使用的是antd，需要根据ui稿调很多的antd组件样式
特做一个样式修改记录，也给需要的人一些帮助

我们修改的有以下样式：

 

 

 

 

 

 

如何改呢：

 

/*修改 antd 组件样式
*/// 仅 drop 下的下拉框改变样式
:global {.ant-select-dropdown {background-color: #0e053a;border-width: 1;border-color: #fff;color: #57f3fe;border-style: inherit;.ant-empty-small {color: #23116d;}.ant-select-item.ant-select-item-option {color: #57f3fe;background-color: transparent;font-size: 14px !important;font-family: 'yanhei' !important;}.ant-select-item-option-active:not(.ant-select-item-option-disabled) {color: #57f3fe;background-color: transparent;font-size: 14px !important;font-family: 'yanhei' !important;}}[class^="ant-select"],[class*=" ant-select"] {color: #57f3fe;font-size: 14px !important;font-family: 'yanhei' !important;font-weight: 400 !important;}
}// selected 选项框的默认样式
:global {.ant-select:not(.ant-select-customize-input) .ant-select-selector {position: relative !important;border: 0px !important;color: #56dcff !important;height: 40px !important;background-color: transparent !important;background: url('../../static/bigdataimg/similarityCheck/bg_search_input@2x.png') 100% no-repeat;background-size: 100% 100%;}.ant-select-single.ant-select-open .ant-select-selection-item {color: #56dcff !important;font-size: 14px !important;font-family: 'yanhei' !important;}.ant-select-single .ant-select-selector {box-sizing: border-box;margin: 0px;color: #56dcff !important;font-size: 14px !important;font-family: 'yanhei' !important;list-style: none;border-radius: 0px;display: flex;align-items: center;}.ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {height: 40px;display: flex;align-items: center;&::placeholder {color: #56dcff !important;display: block;}}.ant-select .ant-select-selection-placeholder {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;// margin-top: 8px;display: flex;align-items: center;color: #56dcff;font-weight: 400;font-size: 14px !important;font-family: 'yanhei' !important;pointer-events: none;}.ant-select ant-select ant-select-in-form-item ant-select-focused ant-select-single ant-select-show-arrow ant-select-open>.ant-select-selector>.ant-select-selection-item {color: #56dcff;font-size: 14px !important;font-family: 'yanhei' !important;}.ant-select .ant-select-selector {color: #56dcff;}
}// input
:global {.ant-input {background-color: transparent !important;border-width: 0px !important;border-radius: 0px !important;// height: 40px;// line-height: 40px;display: block;color: #56dcff !important;font-size: 14px;font-family: yanhei !important;font-weight: 400 !important;border: 0px !important;&::placeholder {color: #56dcff !important;display: block;font-size: 14px !important;font-family: yanhei !important;font-weight: 400 !important;}}[class^="ant-form"],[class*=" ant-form"] {font-family: 'yanhei' !important;font-size: 14px !important;}.ant-form-item .ant-form-item-explain-error {font-family: 'yanhei' !important;font-size: 14px !important;}.ant-input header_product {display: flex;align-items: center;}.ant-input:hover {background-color: transparent !important;}.ant-input:focus,.ant-input-focused {background-color: transparent !important;box-shadow: none;}.ant-textarea.ant-input {vertical-align: middle;}.ant-input ant-input-status-success header_product {background-color: transparent !important;}input:-internal-autofill-selected {box-shadow: inset 0 0 0 1000px #281840 !important; // 改变了背景色-webkit-text-fill-color: #56dcff; // 改变了字体颜色}input:-internal-autofill-previewed {box-shadow: inset 0 0 0 1000px #281840 !important; // 改变了背景色-webkit-text-fill-color: #56dcff; // 改变了字体颜色}.ant-input-number .ant-input-number-input {font-family: 'yanhei' !important;}.ant-form-item .ant-form-item-control-input {min-height: 1px !important;}
}// table
:global {.ant-table-wrapper .ant-table-thead>tr>th {text-align: center !important;background: transparent !important;color: #5cd3ff;font-size: 14px;font-family: 'yanhei' !important;font-weight: 400;}.ant-table-wrapper .ant-table {background: transparent !important;color: #5cd3ff !important;}.ant-table-container {background: transparent !important;}//箭头 颜色.ant-table-wrapper .ant-table-column-sorter-up.active,.ant-table-wrapper .ant-table-column-sorter-down.active {color: white;}//header右边滚动条颜色.ant-table-wrapper .ant-table-cell-scrollbar:not([rowspan]) {box-shadow: 0 0px 0 0px transparent;}.ant-table-placeholder {background: transparent;}.ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>th,.ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>td,.ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder {background: transparent;}.ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder {background: transparent;}// 文字提示颜色.ant-empty-normal .ant-empty-description {color: white !important;}// cell字体颜色.ant-table-thead>tr>th {color: #5cd3ff !important;}//footer title color.ant-pagination-total-text {color: #56dcff !important;font-size: 14px !important;}// .ant-pagination-item-link> * {//   font-size: 14px !important;// }// footer page arrow color.ant-pagination-item-link {color: #56dcff !important;}// set cell header footer title padding.ant-table-wrapper .ant-table.ant-table-small .ant-table-title,.ant-table-wrapper .ant-table.ant-table-small .ant-table-footer,.ant-table-wrapper .ant-table.ant-table-small .ant-table-thead>tr>th,.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody>tr>th,.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody>tr>td,.ant-table-wrapper .ant-table.ant-table-small tfoot>tr>th,.ant-table-wrapper .ant-table.ant-table-small tfoot>tr>td {padding: 2px 1px 2px 2px;}// table cotainer padding.ant-spin-container {padding: 10px 20px;}.ant-pagination .ant-pagination-disabled .ant-pagination-item-link,.ant-pagination .ant-pagination-disabled:hover .ant-pagination-item-link {color: rgba(1, 1, 1, 0.5) !important;}// 设置 cell and header padding 内边距.ant-table-wrapper .ant-table-thead>tr>th {text-align: left !important;}.ant-table-wrapper .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before,.ant-table-wrapper .ant-table-thead>tr>td:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {background-color: transparent !important;}.ant-table ant-table-empty ant-table-fixed-header {background: transparent !important;background-color: transparent !important;.ant-table-container {background-color: transparent !important;.ant-table-cell {background-color: transparent !important;}}}.ant-table-wrapper .ant-table-thead>tr>th,.ant-table-wrapper .ant-table-thead>tr>td {background: transparent !important;border-bottom: 0px solid transparent !important; // 隐藏header cell分割线}.ant-table-body .ant-table-cell {border-bottom: 0px solid black !important; // 隐藏cell分割线background-color: transparent !important;}.ant-table-wrapper .ant-table-thead>tr>th::before {width: 0px !important;}.ant-table-thead>tr>th {color: #5cd3ff !important;}.ant-table-wrapper td.ant-table-column-sort {background: transparent !important;}// 隐藏滚动条.ant-table-body::-webkit-scrollbar {width: 1px;display: none;}// 修改分页文字颜色.ant-pagination .ant-pagination-item a {color: #56dcff !important;}.ant-pagination-item-link {color: #56dcff !important;}.ant-pagination .ant-pagination-disabled .ant-pagination-item-link {color: #56dcff !important;}[class^="ant-table"],[class*=" ant-table"] {color: #5cd3ff !important;font-size: 16px !important;font-family: 'yanhei' !important;font-weight: 400 !important;}[class^="ant-pagination"],[class*=" ant-pagination"] {font-family: 'yanhei' !important;}.ant-empty-description {font-size: 14px !important;font-family: 'yanhei' !important;}
}// input-number
:global {.ant-input-number-input {background-color: transparent !important;border-width: 0px !important;border-radius: 0px !important;height: 40px;color: #5cd3ff !important;border: 0px !important;&::placeholder {color: #56dcff !important;}}.ant-input-number {background-color: transparent !important;border-width: 0px !important;border-radius: 0px !important;padding: 0px;height: 40px;color: #5cd3ff !important;border: 0px !important;&::placeholder {color: #56dcff !important;}}
}:global {.ant-picker .ant-picker-input>input {// 字体颜色color: #56dcff !important;font-size: 14px !important;font-family: 'yanhei' !important;&::placeholder {color: #56dcff !important;font-size: 14px !important;font-family: 'yanhei' !important;}//icon颜色.ant-picker .ant-picker-suffix {color: #56dcff;}}//icon颜色.ant-picker .ant-picker-suffix {color: #56dcff;}//鼠标悬浮字体颜色（年月）.ant-picker-dropdown .ant-picker-header-view button:hover {color: #56dcff !important;font-size: 14px !important;}//鼠标悬浮字体颜色（日）.ant-picker-cell:hover {color: #56dcff !important;font-size: 14px !important;}//选择颜色（日）.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {color: #56dcff !important;}[class^="ant-select"],[class*=" ant-select"] {font-family: 'yanhei' !important;}}// antd 全局分页设置
:global {// 分页文本框样式设置.ant-pagination.ant-pagination-simple .ant-pagination-simple-pager input {background: url('../../static/bigdataimg/similarityCheck/but_page@2x.png') 100% no-repeat;background-size: 100% 100%;background-color: transparent !important;border-width: 0px;min-height: 24px !important;min-height: 28px !important;min-width: 40px !important;font-size: 13px !important;font-family: 'yanhei' !important;text-align: center !important;}// 字体颜色.ant-pagination-simple-pager {color: #56dcff !important;font-size: 14px !important;font-family: 'yanhei' !important;}// 文字居左显示.ant-pagination .ant-pagination-total-text {flex: 1;font-size: 14px !important;font-family: 'yanhei' !important;}
}// antd 消息弹窗
:global {//消息高度.ant-message {top: 15% !important;color: #57f3fe !important;font-family: 'yanhei' !important;}//消息div 背景和圆角边线.ant-message-notice-content {background: #0d0538 !important;border: 2px solid #57f3fe;}//消息div 图片颜色.ant-message-error>.anticon {color: #57f3fe !important;font-family: 'yanhei' !important;}}// antd 右侧消息弹窗
:global {//消息高度.ant-notification {right: auto !important;top: 15% !important;left: 50% !important;position: absolute !important;transform: translate(-50%, -50%) !important; //再左右即-50%自身的一半，完成居中font-family: 'yanhei' !important;}//消息div 背景和圆角边线.ant-notification-notice {background: #0d0538 !important;border: 2px solid #57f3fe;}//消息div 图片颜色.ant-notification-notice-with-icon>* {color: #57f3fe !important;font-family: 'yanhei' !important;}}//antd 图片loading
:global {.ant-image .ant-image-placeholder {position: absolute;inset: 0;display: flex;flex-direction: row;justify-content: center;align-items: center;}
}

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

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

相关文章

苹果手机ios设备管理软件iMazing 2.17.6官方版下载及常见问题解决

苹果手机ios设备管理软件iMazing 2.17.6官方版下载及常见问题解决

苹果手机ios设备管理软件iMazing 2.17.6官方版下载(ios设备管理软件)是一款管理苹果设备的软件， Windows / macos 系统上的一款帮助用户管理 IOS 手机的应用程序，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得非常人性化。…
阅读更多...
命令模式（Command）

命令模式（Command）

别名 动作（Action）事务（Transaction） 定义 命令是一种行为设计模式，它可将请求转换为一个包含与请求相关的所有信息的独立对象。该转换让你能根据不同的请求将方法参数化、延迟请求执行或将其放入队列中&#xff0c…
阅读更多...
【PCB专题】Allegro如何设置电源电压属性，将飞线隐藏？

【PCB专题】Allegro如何设置电源电压属性，将飞线隐藏？

在PCB设计过程中，布局完成之后的布线的顺序一般是先走信号线，然后进行电源的处理、分割。因为电源往往在整个板子上是都有的，所以电源的飞线是非常多，在布线时特别影响其他信号线的布线，界面看着比较杂乱。 如下所示GND和1.8V都存在各种飞线，比较杂乱。 Allegro中有设置…
阅读更多...
学习机组过程中的疑难问题与解决 -----(1)

学习机组过程中的疑难问题与解决 -----(1)

本文章是在学习计算机组成原理过程中个人感觉需要理解与记忆的问题，还有一些在学习过程中自己产生的疑问以及解答,本文章可能排版不良，精力有限，还请见谅 第一章： （1）MAR的位数对应着存储单元的个数&#…
阅读更多...
JVM学习整理（一）

JVM学习整理（一）

一、JVM的基本介绍 JVM 是 Java Virtual Machine 的缩写，它是一个虚构出来的计算机，一种规范。通过在实际的计算机上仿真模拟各类计算机功能实现 好，其实抛开这么专业的句子不说，就知道JVM其实就类似于一台小电脑运行在windows或…
阅读更多...
JSP网上订餐管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

JSP网上订餐管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 网上订餐管理系统是一套完善的web设计系统，对理解JSP java SERLVET mvc编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,eclipse开发，数据库为Mysql5.0&a…
阅读更多...
Java微服务金融项目智牛股 项目简介与金融知识介绍及技术特点

Java微服务金融项目智牛股 项目简介与金融知识介绍及技术特点

项目简介 金融交易平台服务于金融衍生产品， 包含外汇、贵金属、期货、股票。 各产品具有不同属性与交易规则， 本项目对标MT4等大型交易平台， 遵循FIX全球最广泛的金融市场通用协议。 实现从证券注册开户、行情订阅与呈现， 股票撮合…
阅读更多...
【GPT】如何拥有离线版本的GPT以及部署过程中的问题

【GPT】如何拥有离线版本的GPT以及部署过程中的问题

【背景】 目前很多公司由于数据安全的问题，不能使用OpenAI的GPT，同时也没有必要非得使用如此泛用化的GPT。很多公司因此有训练自己的离线GPT的需求，这样的GPT只需要具备专业知识即可。 要使这个成为可能，首先就需要能够让GPT的Mo…
阅读更多...
SAP ABAP 如果某字段没有参数ID，如自开发程序使用的自建表 新建参数ID

SAP ABAP 如果某字段没有参数ID，如自开发程序使用的自建表 新建参数ID

1）新建参数ID sm30 TPARA 维护 输入ID和描述 2） 参数ID和Se11数据元素 绑定
阅读更多...
【MySQL学习笔记】（六）MySQL基本查询

【MySQL学习笔记】（六）MySQL基本查询

表的增删查改 1 create1.1 单行数据全列插入1.2 多行数据 指定列插入1.3 插入否则更新1.4 替换 2 retrieve2.1 select列2.1.1 全列查询2.2.2 指定列查询2.2.3 查询字段为表达式2.2.4 为查询结果指定别名2.2.5 结果去重 2.2 where 条件2.2.1 null的查询 2.3 结果排序2.4 筛选分…
阅读更多...
Leetcode 75算法题( 上)（使用C++实现）

Leetcode 75算法题( 上)（使用C++实现）

数组 / 字符串 1768.交替合并字符串 两个字符串 word1 和 word2 。请你从 word1 开始，通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长，就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 ​ 代码如下&#xff1a…
阅读更多...
初识SpringMVC

初识SpringMVC

HelloSpringMVC 1.新建一个moudle&#xff0c;添加web的支持 2.导入了SpringMVC的依赖 <!-- 依赖--><dependencies> <!-- Junit --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023