当前位置: 首页 > news >正文

React UI组件库

1 流行的开源React UI组件库

1 material-ui(国外)
  1. 官网: Material UI: React components based on Material Design

  2. github: GitHub - mui/material-ui: MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

2 ant-design(国内蚂蚁金服)
  1. 官网: Ant Design - 一套企业级 UI 设计语言和 React 组件库

  2. Github: ​​​​​​​GitHub - ant-design/ant-design: An enterprise-class UI design language and React UI library

安装:

npm add antd

2 antd的按需引入+自定主题

1.安装依赖:npm add react-app-rewired customize-cra babel-plugin-import less less-loader

2.修改package.json

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"
},

3.根目录下创建config-overrides.js

//配置具体的修改规则
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: true,}),addLessLoader({lessOptions: {javascriptEnabled: true,modifyVars: { '@primary-color': 'green' },}}),
);

4.备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉

5.这样之后我npm start报错,解决方案:在package.json添加config-overrides-path的设置

报错如下:

img

"name": "react_staging",
"version": "0.1.0",
"private": true,
"config-overrides-path": "node_modules/react-app-rewired/config-overrides.js",

img

最后npm start成功启动

相关文章:

React UI组件库

1 流行的开源React UI组件库 1 material-ui(国外) 官网: Material UI: React components based on Material Design github: GitHub - mui/material-ui: MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Go…...

计算机科学的伟大变革:从机械计算到人工智能

摘要 计算机科学作为一门学科,经历了几十年的发展和演变。本论文旨在探讨计算机科学领域的伟大变革,从最早的机械计算设备到如今的人工智能系统。通过回顾历史、分析技术进步以及展望未来,我们可以清晰地看到计算机科学如何塑造了现代社会&a…...

微服务详解

微服务 什么是微服务? 微:单个服务的设计,所有参与人从设计、开发、测试、运维所有人加起来只需要两个披萨就够了 服务:一定要区别于系统,服务一个或者一组相对较小且独立的功能单元,是用户可以感知的最…...

Python爬虫的requests(学习于b站尚硅谷)

目录 一、requests  1. requests的基本使用  (1)文档  (2)安装  (3)响应response的属性以及类型  (4)代码演示 2.requests之get请求  3. requests之post请求  &#x…...

PHP最简单自定义自己的框架view使用引入smarty(8)--自定义的框架完成

1、实现效果。引入smarty, 实现assign和 display 2、下载smarty,创建缓存目录cache和扩展extend 点击下面查看具体下载使用,下载改名后放到extend PHP之Smarty使用以及框架display和assign原理_PHP隔壁老王邻居的博客-CSDN博客 3、当前控…...

字符串的常用操作

1.拼接字符串 使用运算符""可以对多个字符串进行拼接将几个字符串拼成一个字符串。 2.计算字符串的长度 使用len()函数计算字符串的长度 len(string) 其中string用于指定要进行长度统计的字符串。 3.截取字符串 由于字符串也属于序列,所以要截取字…...

开启想象翅膀:轻松实现文本生成模型的创作应用,支持LLaMA、ChatGLM、UDA、GPT2、Seq2Seq、BART、T5、SongNet等模型,开箱即用

开启想象翅膀:轻松实现文本生成模型的创作应用,支持LLaMA、ChatGLM、UDA、GPT2、Seq2Seq、BART、T5、SongNet等模型,开箱即用 TextGen: Implementation of Text Generation models 1.介绍 TextGen实现了多种文本生成模型,包括&a…...

文心一言 VS 讯飞星火 VS chatgpt (74)-- 算法导论7.2 2题

二、如果用go语言,当数组A的所有元素都具有相同值时,QUICKSORT的时间复杂度是什么? 文心一言: 在Go语言中,对一个所有元素都相等的数组进行快速排序(QuickSort)的时间复杂度是O(n log n)。 快速排序是一…...

大数据第二阶段测试

大数据第二阶段测试 一、简答题 Flume 采集使用上下游的好处是什么? 参考答案一 -上游和下游可以实现解耦,上游不需要关心下游的处理逻辑,下游不需要关心上游的数据源。 -上游和下游可以并行处理,提高整体处理效率。 -可以实现…...

06 为什么需要多线程;多线程的优缺点;程序 进程 线程之间的关系;进程和线程之间的区别

为什么需要多线程 CPU、内存、IO之间的性能差异巨大多核心CPU的发展线程的本质是增加一个可以执行代码工人 多线程的优点 多个执行流,并行执行。(多个工人,干不一样的活) 多线程的缺点 上下文切换慢,切换上下文典型值…...

datax-web报错收集

在查看datax时发现日志出现了如上错误,因为项目是部署在本地linux虚拟机上的,使用的是nat网络地址转换,不知道为什么虚拟机的端口号发生了变化,导致数据库根本连接不进去,更新linux虚拟机的ip地址就好...

YOLO相关原理(文件结构、视频检测等)

超参数进化(hyperparameter evolution) 超参数进化是一种使用了genetic algorithm(GA)遗传算法进行超参数优化的一种方法。 YOLOv5的文件结构 images文件夹内的文件和labels中的文件存在一一对应关系 激活函数:非线性处理单元 activation f…...

深入解析Spring Boot的核心特性与示例代码

系列文章目录 文章目录 系列文章目录前言一、自动配置(Auto-Configuration)二、起步依赖(Starter Dependencies)三、命令行界面(CLI)四、微服务支持五、内嵌Web服务器六、配置文件管理七、简化的日志配置八、健康检查与监控九、注解驱动开发十、外部化配置总结前言 Spri…...

什么是Java中的观察者模式?

Java中的观察者模式是一种设计模式,它允许一个对象在状态发生改变时通知它的所有观察者。这种模式在许多情况下都非常有用,例如在用户界面中,当用户与界面交互时,可能需要通知其他对象。 下面是一个简单的Java代码示例&#xff0…...

无涯教程-Perl - endhostent函数

描述 此函数告诉系统您不再希望使用gethostent从hosts文件读取条目。 语法 以下是此函数的简单语法- endhostent返回值 此函数不返回任何值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perlwhile( ($name, $aliases, $addrtype, $length, addrs)gethostent() ) …...

Vue2使用easyplayer

说一下easyplayer在vue2中的使用&#xff0c;vue3中没测试&#xff0c;估计应该差不多&#xff0c;大家可自行验证。 安装&#xff1a; pnpm i easydarwin/easyplayer 组件封装 习惯性将其封装为单独的组件 <template><div class"EasyPlayer"><e…...

Map映射学习

一、Map的遍历 创建Map集合 Map<String, Integer> map new HashMap<>();添加元素 map.put("java", 99);map.put("c", 88);map.put("c", 93);map.put("python", 96);map.put("Go", 88); 遍历方法&#xff1a; …...

【每日一题Day292】LC1572矩阵对角线元素的和 模拟

矩阵对角线元素的和【LC1572】](https://leetcode.cn/problems/matrix-diagonal-sum/) 思路 简单模拟&#xff0c;主对角线的元素横纵坐标相等&#xff0c;副对角线的元素横纵坐标相加为n-1&#xff0c;注意避免重复计算 实现 class Solution {public int diagonalSum(int[][]…...

Mongodb:业务应用(2)

需求&#xff1a; 1、获取保存到mongodb库中的搜索记录列表 2、实现删除搜索记录接口 保存搜索记录数据参考上篇Mongodb&#xff1a;业务应用&#xff08;1&#xff09;_Success___的博客-CSDN博客 获取记录列表 1、创建controller package com.heima.search.controller.v1;…...

DSO学习笔记

最近在学习DSO系列的代码&#xff0c;整理记录一下 DOS代码流程 TODO DSO跑kitti数据集 参考高翔大佬的LDSO中LDSO/examples/run_dso_kitti.cc&#xff0c;由于kitti数据集木有光度参数标定文件&#xff0c;其实最重要的就是相机内参文件camera.txt按照格式来就行了&#xff…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...