您的当前位置:首页>全部文章>文章详情

【AntDesignPro】Ant Design Pro学习记录—默认主题配色修改

CrazyPanda发表于:2023-11-28 21:26:59浏览:776次TAG:

版本: Ant Design Pro V5

先参考下官网定制主题 - Ant Design

再参考这篇文章antd pro 修改全局样式_tankpanv的博客-CSDN博客_antd修改全局样式

最后自己实验:

第一步,在config.ts文件中配置

theme: {
    'primary-color': defaultSettings.primaryColor,
  },

这种配置需要修改defaultSettings.ts文件的primaryColor,

或者直接配置

theme: {
    'primary-color': '#25ba83',
  },

第二步,在global.less中配置,先引入@import '~antd/dist/antd.less';

@import '~antd/es/style/variable.less';
//新引入
@import '~antd/dist/antd.less';

然后在global.less最后加上@primary-color: #25ba83;使自己的样式覆盖原样式。

@primary-color: #25ba83;

如果没有加入@import '~antd/dist/antd.less';样式会覆盖不全,按钮等组件触摸和点击时样式不会改变,而且经过多次测试,如果加入了@import '~antd/dist/antd.less';第一步就必须配置上,否则直接编译报错(暂时没搞明白为什么会报错)

这样两个配置后,主题颜色就改完了,如果有其他样式要修改,也可以在global.less直接修改,如下图官网给出的配置都可以重新定义

1.png



猜你喜欢

【React】使用React实现一个内容滑动组件
最近在做项目时遇到一个需求,需要让一个列表能够通过点击按钮进行滚动,每次都是一屏的距离,不足则结束。并且,这个列表项是在react-grid-layout中的某一个模块内。所以包裹这个列表的容器会随时发生变化。在完成这个组件后,通过这篇文章总结一下。UI/原型分析那么从上面的功能描述以及项目中的UI,我们可以分析得到这样一个假想图:我们需要实现一个容器来作为我们的可视区域,并且这个容器是可以伸缩的。列表内容如果超出容器的可视区域,那么就会被隐藏。需要左右都有按钮,来支持用户左右滑动内容来查看,每
发表于:2024-04-10 浏览:317 TAG:
【AntDesignPro】Ant Design Pro学习记录—前后端一体化部署
目录前言一、系统配置二、ant design pro访问路径配置三、站点访问路径配置前言好长时间没记录了,使用ant design pro有一年了,期间陆续做了好几个项目,从陌生到熟练,还有好多钻研成果没记录,后续有时间陆续补上。之前几个项目一直是前后端分开部署的,需要配置两个站点域名访问,还要解决跨域session问题,这次把一体化部署记录一下。一、系统配置服务端用的LNMP,使用tp6框架,使用宝塔面板管理。tp站点先正常部署,步骤省略,见下图:配置网站目录和运行目录: 编辑配置伪
发表于:2023-11-28 浏览:818 TAG:
【AntDesignPro】Ant Design Pro学习记录—ProTable的使用(二)
目录一、列表检索初始值设置二、字段缩略显示一、列表检索初始值设置使用initialValue属性,配置列表检索的初始值const columns: ProColumns<API.RoomItem>[] = [     {      title: '名称',     &nb
发表于:2023-11-28 浏览:700 TAG:
【React】React中Typecript的使用
目录一、创建React的TypeScript项目二、使用差别1、基本使用2、Props传值的差别3、State传参三、总结一、创建React的TypeScript项目见:如何在React项目中引入TypeScript?_duansamve的博客-CSDN博客二、使用差别1、基本使用其基本使用和javascript编写React项目时差不多这是一份.tsx文件代码:可以看到和之前的.jsx使用并无太大差别import React, { Component }
发表于:2023-12-05 浏览:689 TAG:
【React】react面试题
React面试题文章目录React面试题一、react特性***React与Vue的区别*******1. Jsx的使用规范*******1.说说对 React 的理解?有哪些特性?DOM2.说说 Real DOM 和 Virtual DOM 的区别?优缺点?*******说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系*******3.说说React Jsx转换成真实DOM过程?4.说说你第mvc和mvvm的理解5.说说react中引入css的方式有哪几种?区
发表于:2023-12-05 浏览:1401 TAG:
【React】react页面加载远程css和js
在React中,您可以使用componentDidMount生命周期方法来动态加载远程CSS和JavaScript文件。代码如下import React, { Component } from 'react';   class DynamicResources extends Component {   componentDidMount()&nbs
发表于:2024-05-15 浏览:268 TAG:
【React】 react 绘制矩形
在React中绘制矩形,可以使用HTML5的<canvas>元素结合React组件的生命周期方法来实现。以下是一个简单的React组件示例,用于绘制矩形:import React, { Component } from 'react';   class Rectangle extends Component {   componentDid
发表于:2024-04-01 浏览:306 TAG:
【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用(二)
 目录一、ModalForm高度设置二、ModalForm点击阴影背景,不隐藏弹框三、ProFormSelect联动四、ProFormText关联赋值一、ModalForm高度设置在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}编辑效果如下:编辑二、ModalForm点击阴影背景,不隐藏弹框同样在modalProps里面,配置maskClosable: false,就可以实现点击弹框外阴影,不隐藏弹框<
发表于:2023-11-28 浏览:1178 TAG:
【AntDesignPro】L7Plot地理可视化组件的使用
L7Plot介绍L7Plot 基于 L7 实现的开箱即用地理空间数据可视化图表库L7Plot 专注于地理可视化图表。以声明配置式的方式,降低用户使用成本;以常见地理图表分类的方式,降低用户选择成本;内部集成全国行政区域数据,降低用户使用地理数据心智;支持多图层及多图表层叠,方便用户定制复杂的业务场景;L7Plot 专注于地理数据可视化展示,不会涉及数据编辑能力。前言项目需要,使用antdesignpro做前端,并绘制可视化大屏,回执地图组件,于是使用了L7Plot。功能目的绘
发表于:2023-12-14 浏览:657 TAG:
【AntDesignPro】Ant Design Pro学习记录—搭建AntDesignPro脚手架
文章目录前言一、操作过程1.初始化2.完成后配置软连接3.继续执行4.进入应用5.安装依赖6.启动前言工作项目需要,使用了AntDesignPro开发,在此做一个学习研究记录。一、操作过程参考官网开始使用 - Ant Design Pro🏆 让中后台开发更简单 包含 table form 等多个组件。https://pro.ant.design/zh-CN/docs/getting-started在node.js npm yarn 环境配置好之后,按照官网操作运行1.初始化npm
发表于:2023-11-22 浏览:581 TAG: #前端 #antd #AntDesignPro