react antd 样式修改

news2024/11/15 18:02:32

最近在做一个大数据的大屏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.coloradmin.cn/o/696926.html

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

相关文章

Linux Host is not allowed to connect to this MySQL server解决方法

Linux Host is not allowed to connect to this MySQL server解决方法

先说说这个错误，其实就是我们的MySQL不允许远程登录，所以远程登录失败了，解决方法如下： 在装有MySQL的机器上登录MySQL mysql -u root -p密码 执行use mysql; 执行update user set host % where user root;这一句执行完可能会报…
阅读更多...
PoseiSwap IDO、IEO 结束，即将登录 BNB Chain

PoseiSwap IDO、IEO 结束，即将登录 BNB Chain

PoseiSwap 是 Nautilus Chain 上的首个 DEX，其正在基于模块化 Layer3 架构底层，以及Nautilus Chain 所提供的 ZKP 来构建属于自己的 Rollup 应用层，并以订单簿作为交易模型，这为其向更多的功能进行拓展提供了早期基础。
阅读更多...
如何打开Windows11上自带安装unbunt系统

如何打开Windows11上自带安装unbunt系统

首先你看到在你电脑上有一个这样 如果直接鼠标点击打开或者使用powershell打开，也可以打开，但发现只是一堆文件夹而已 正确打开方式，使用unbunt-LTS，打开，这个在哪里？ 你可以在电脑Microsoft store输入 u…
阅读更多...
春秋云镜cve-2022-32991wp

春秋云镜cve-2022-32991wp

首先看靶标介绍：该CMS的welcome.php中存在SQL注入攻击 访问此场景，为登录界面，可注册，注册并登陆后找可能存在sql注入的参数，尝试在各个参数后若加一个单引号报错，加两个单引号不报错，说明此参…
阅读更多...
CentOS7安装Nginx(tar包安装)

CentOS7安装Nginx(tar包安装)

一. 安装环境 操作系统：Centos 7. 最小化安装 服务器地址：*** 二.安装过程： 1. 安装wget yum install wget -y 2. 下载Nginx wget http://nginx.org/download/nginx-1.25.1.tar.gz 官网下载 Nginx： http://nginx.org/en/down…
阅读更多...
使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

在根据路由遍历生成侧边导航栏时，遇到一个问题，就是当我点击选中某个垂直菜单时，只有点击第二次它才会展开，第一次在选中垂直菜单之后垂直菜单它就收缩起来了，如下图： 如上图，在我第一次点击选…
阅读更多...
Gitlab升级报错二：rails_migration[gitlab-rails] (gitlab::database_migrations line 51)

Gitlab升级报错二：rails_migration[gitlab-rails] (gitlab::database_migrations line 51)

gitlab-ctl 修改文件目录后出现以下错误：从root --> home 先停掉gitlab: gitlab-ctl stop 单独启动数据库，如果不单独启动数据库，就会报以上错误 sudo gitlab-ctl start postgresql 解决办法： sudo gitlab-rake db:migrat…
阅读更多...
Interactive Linear Algebra：免费的交互式线性代数学习教程

Interactive Linear Algebra：免费的交互式线性代数学习教程

本文介绍一个学习线性代数的网站，该网站通过将线性代数中的数学规则可视化，更直观的展示线性代数的运算过程。该网站可以帮助我们更快更高效的学习线性代数。如果有考研的同学或者觉得学习线性代数很枯燥或者很困难的同学，可以了解该网站&…
阅读更多...
XILINX 7系列FPGA封装兼容原则及同封装替换注意问题

XILINX 7系列FPGA封装兼容原则及同封装替换注意问题

🏡《电子元器件高级指南》 目录 1，概述2，封装兼容原则3，注意问题4，总结 1，概述 XILINX 7系列的FPGA同封装的元器件一般都是可以兼容的，在一定程度上可以做到PIN TO PIN的替换，本文介…
阅读更多...
Windows服务器部署项目自启动

Windows服务器部署项目自启动

1.下载jar包 https://github.com/kohsuke/winsw 2.重命名 3. 编辑xml文件 <configuration> <id>MyApp</id> <name>MyApp</name> <description>This is MyApp.</description><executable>java</executable> <argum…
阅读更多...
NTP服务设置开机自启启动失败

NTP服务设置开机自启启动失败

文章目录 前言一、NTP服务设置开机自启启动失败原因二、解决办法 前言 Linux服务器设置了ntpd开机自启动&#xff0c;重启服务器ntpd却没有自启动 一、NTP服务设置开机自启启动失败原因 原因&#xff1a;chrony服务与NTP服务冲突导致开机启动未生效 二、解决办法 关闭chrony服务…
阅读更多...
Flutter 设置自定义字体

Flutter 设置自定义字体

一般我们会在 assets 文件夹下新建一个 font 的文件夹&#xff0c;然后把字体拖动到 font 文件夹中&#xff0c;如下图所示 然后在 pubspec.yaml 配置文件中新添加如下内容 fonts:- family: Impactfonts:- asset: assets/font/IMPACT.TTF 最后字体使用 Text( "自定义字体…
阅读更多...
初级应急响应-Windows-常用工具

初级应急响应-Windows-常用工具

应急工具-PChunter PCHunter是一款强大的内核级监控软件&#xff0c;软件可以查看内核文件、驱动模块、隐藏进程、注册表内核&#xff0c;网络等等信息&#xff0c;和PCHunter功能相似的还有火绒剑&#xff0c;PowerTool等。 应急工具-Autoruns 登录时的加载程序、驱动程序加…
阅读更多...
poi生成excel饼图设置颜色

poi生成excel饼图设置颜色

效果 实现 import com.gideon.entity.ChartPosition; import com.gideon.entity.LineChart; import com.gideon.entity.PieChart; import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util.CellRangeAddress; import org.apache.poi.xddf.usermodel.PresetColo…
阅读更多...
react封装jsoneditor

react封装jsoneditor

1、安装&#xff1a; api文档&#xff1a;jsoneditor npm install jsoneditor2、代码&#xff1a; JsonEditor/index.tsx: import { useMemoizedFn } from ahooks; import JSONEditor from jsoneditor; import { useEffect, useState } from react; import ./index.less;in…
阅读更多...
SpringBoot - 如何使用SpringBootServletInitializer将SpringBoot项目打成WAR包并部署TOMCAT中

SpringBoot - 如何使用SpringBootServletInitializer将SpringBoot项目打成WAR包并部署TOMCAT中

写在前面 请先阅读&#xff1a; MAVEN的SCOPE属性详细说明&#xff1a;https://blog.csdn.net/goodjava2007/article/details/122860143 SpringBootServletInitializer的作用 SpringBootServletInitializer 是一个 SpringBoot 提供的、用于配置SERVLET初始化的类&#xff0c…
阅读更多...
美颜SDK的未来发展：从单纯的美颜到更多的人脸应用

美颜SDK的未来发展：从单纯的美颜到更多的人脸应用

近年来&#xff0c;随着智能手机的普及和社交媒体的兴起&#xff0c;美颜应用成为了人们生活中越来越重要的一部分。为了满足用户对美颜的需求&#xff0c;美颜SDK&#xff08;软件开发工具包&#xff09;应运而生&#xff0c;它为开发者提供了一种方便的方式来集成美颜功能到他…
阅读更多...
样本标准差与总体标准差中自由度理解

样本标准差与总体标准差中自由度理解

在计算总体标准差时&#xff0c;其计算公式如下&#xff1a; 计算样本标准差是&#xff1a; 这里样本标准差用的是n-1&#xff0c;不是n。根据chatgpt的回答&#xff0c;理解如下&#xff1a; 当样本均值使用作为均值估计量会引入一定的不确定性&#xff08;偏差&#xff09;&…
阅读更多...
华为OD机试真题 Python 实现【天然蓄水池】【2023Q1 200分】，附详细解题思路

华为OD机试真题 Python 实现【天然蓄水池】【2023Q1 200分】，附详细解题思路

一、题目描述 公元2919年&#xff0c;人类终于发现了一颗宜居星球——X星。现想在X星一片连绵起伏的山脉间建一个天然蓄水库&#xff0c;如何选取水库边界&#xff0c;使蓄水量最大&#xff1f; 要求&#xff1a; 山脉用正整数数组s表示&#xff0c;每个元素代表山脉的高度。…
阅读更多...
基于GPT3.5模型搭建的聊天系统BAIChat

基于GPT3.5模型搭建的聊天系统BAIChat

1. 使用chatgpt前提条件 需要特殊的网络环境。如果是小白&#xff0c;不会搭建网络环境&#xff0c;可以关注我私信我&#xff0c;在线帮你搭建网络环境。 2.BAIChat链接 https://chatbot.theb.ai/#/chat/1686535596065 GPT3 研究背景 最近的研究表明&#xff0c;在 pretrai…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023