【AntDesignPro】Ant Design Pro学习记录—默认主题配色修改
CrazyPanda发表于:2023-11-28 21:26:59浏览:776次
版本: Ant Design Pro V5
先参考下官网
再参考这篇文章
最后自己实验:
第一步,在config.ts文件中配置
这种配置需要修改defaultSettings.ts文件的primaryColor,
或者直接配置
第二步,在global.less中配置,先引入@import '~antd/dist/antd.less';
然后在global.less最后加上@primary-color: #25ba83;使自己的样式覆盖原样式。
如果没有加入@import '~antd/dist/antd.less';样式会覆盖不全,按钮等组件触摸和点击时样式不会改变,而且经过多次测试,如果加入了@import '~antd/dist/antd.less';第一步就必须配置上,否则直接编译报错(暂时没搞明白为什么会报错)
这样两个配置后,主题颜色就改完了,如果有其他样式要修改,也可以在global.less直接修改,如下图官网给出的配置都可以重新定义
猜你喜欢
- 【React】使用React实现一个内容滑动组件
- 最近在做项目时遇到一个需求,需要让一个列表能够通过点击按钮进行滚动,每次都是一屏的距离,不足则结束。并且,这个列表项是在react-grid-layout中的某一个模块内。所以包裹这个列表的容器会随时发生变化。在完成这个组件后,通过这篇文章总结一下。UI/原型分析那么从上面的功能描述以及项目中的UI,我们可以分析得到这样一个假想图:我们需要实现一个容器来作为我们的可视区域,并且这个容器是可以伸缩的。列表内容如果超出容器的可视区域,那么就会被隐藏。需要左右都有按钮,来支持用户左右滑动内容来查看,每
- 【AntDesignPro】Ant Design Pro学习记录—前后端一体化部署
- 目录前言一、系统配置二、ant design pro访问路径配置三、站点访问路径配置前言好长时间没记录了,使用ant design pro有一年了,期间陆续做了好几个项目,从陌生到熟练,还有好多钻研成果没记录,后续有时间陆续补上。之前几个项目一直是前后端分开部署的,需要配置两个站点域名访问,还要解决跨域session问题,这次把一体化部署记录一下。一、系统配置服务端用的LNMP,使用tp6框架,使用宝塔面板管理。tp站点先正常部署,步骤省略,见下图:配置网站目录和运行目录: 编辑配置伪
- 【AntDesignPro】Ant Design Pro学习记录—ProTable的使用(二)
- 目录一、列表检索初始值设置二、字段缩略显示一、列表检索初始值设置使用initialValue属性,配置列表检索的初始值const columns: ProColumns<API.RoomItem>[] = [ { title: '名称', &nb
- 【React】React中Typecript的使用
- 目录一、创建React的TypeScript项目二、使用差别1、基本使用2、Props传值的差别3、State传参三、总结一、创建React的TypeScript项目见:如何在React项目中引入TypeScript?_duansamve的博客-CSDN博客二、使用差别1、基本使用其基本使用和javascript编写React项目时差不多这是一份.tsx文件代码:可以看到和之前的.jsx使用并无太大差别import React, { Component }
- 【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的方式有哪几种?区
- 【React】react页面加载远程css和js
- 在React中,您可以使用componentDidMount生命周期方法来动态加载远程CSS和JavaScript文件。代码如下import React, { Component } from 'react'; class DynamicResources extends Component { componentDidMount()&nbs
- 【React】 react 绘制矩形
- 在React中绘制矩形,可以使用HTML5的<canvas>元素结合React组件的生命周期方法来实现。以下是一个简单的React组件示例,用于绘制矩形:import React, { Component } from 'react'; class Rectangle extends Component { componentDid
- 【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用(二)
- 目录一、ModalForm高度设置二、ModalForm点击阴影背景,不隐藏弹框三、ProFormSelect联动四、ProFormText关联赋值一、ModalForm高度设置在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}编辑效果如下:编辑二、ModalForm点击阴影背景,不隐藏弹框同样在modalProps里面,配置maskClosable: false,就可以实现点击弹框外阴影,不隐藏弹框<
栏目分类全部>