React如何使用第三方ui库

已于 2024-01-05 18:40:05 修改
阅读量409 收藏 9
点赞数 9
文章标签： react.js ui 前端
于 2024-01-05 16:54:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68167028/article/details/135413606
版权

地址：https://ant.design/components/button-cn

安装命令：npm install antd --save

安装成功之后不需要配置，直接拿来就可以用了  例如：

第2个好用的ui框架React Button component - Material UI

第一步安装命令

npm install @mui/material @emotion/react @emotion/styled

如何你想要更好看的样式还可以在执行（也可以不用执行）

npm install @mui/material @mui/styled-engine-sc styled-components

第二步：引用配置

Qcast
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-基于react的cnode第三方webapp
08-14
一个WebApp版的cnode客户端，项目采用react技术栈构建。组件选用的是Material-UI。
NativeBase：React Native的基本跨平台UI组件
02-02
本机库 React Native的基本跨平台UI组件 更新了文档 表中的内容 1.什么是NativeBase？ 是由充满激情的React Loving团队创建的一种时尚，巧妙且动态的前端框架，用于使用可立即使用的React Native通用组件构建跨平台的Android和iOS移动应用程序。 2.为什么选择NativeBase？ 真正在于，您可以使用共享的UI跨平台组件，这将大大提高您的生产率。 使用NativeBase时，可以直接使用任何本机第三方库。 微软推荐 如果您想开始使用React Native + CodePush，并且正在寻找一个很棒的入门套件，则应该查看Native Starter Pro- 由推荐 NativeBase已添加到Awesome React Native列表中，并且也被世界各地许多其他React爱好者使用。 4.入门 一个。 使用纯React Native应用程序进行设置 安装NativeBase： npm install native - base -- save 安装对等依赖项： 任何npm软件包中包含的对等依赖项都不会自动安装。 您的应
jinle-ui：react + ts封装UI组件库
02-14
第三方库 normalize.css ---一个很小的css文件，在默认HTML元素样式上提供了跨浏览器的高度一致 类名---使用js来动态判断是否为组件添加类 React-testing-library ---组件单元测试 jest-dom ---增加DOM测试断言 fontawesome --- svg图标库 react-transition-group ---动画库 故事书---本地调试组件和生成文档 解决方法 获取原生组件上的属性 类如button，React已经封装好了原生按钮的属性集合ButtonHTMLAttributes import React , { ButtonHTMLAttributes , AnchorHTMLAttributes } from 'react' ; // 加入 btn 默认属性 type NativeButtonProps = BaseButto
贝岭的matlab的代码-future-react-ui:一个研究第三方ReactUILib架构的游乐场
06-16
贝岭的matlab的代码一个研究良好的第三方 React UI Lib 架构的游乐场 我的目标是找到一个可以作为高质量 React UI 库的基础的架构。 一致的主题/样式 API 将使许多开发人员的生活更加舒适。 需要帮助/反馈/您的意见！ :) 随意加入正在进行的讨论或打开一个新问题。 如何设置和运行 npm install cd app npm install npm start 基本理念 独立的 使组件自包含（无全局 UI 库依赖项），以便您可以导入它们并避免导入整个库，例如 // import the whole lib and get Toggle import { Toggle } from 'ui-lib'; // just import toggle without importing the whole library import Toggle from 'ui-lib/Toggle'; React主题 利用React主题。 这是为单个组件提供许多样式类的好方法。 我相信将其作为约定将有益于 React 社区，因为在许多库上具有一致的 API。 基于类名 组件样式
spyke-react-hook-router-link:从React Router的Link逻辑中提取的React钩子，可以更轻松地与第三方UI库集成
05-28
@ spyke / react-hook-router-link 从react-router的逻辑中摘录的内容，可以更轻松地与第三方UI库集成。 如果您使用的是UI库并希望呈现链接，则一开始您可能会提出以下建议： < Anchor xss=removed xss=removed xss=removed xss=removed> 这种方法的问题可能是，您将失去对icon支持（链接对如何渲染它一无所知），并开始收到有关多余道具的。 另一种方法是制作自定义组件或HoC，但是在两种情况下，您都获得了更多嵌套的React树和大量代码。 钩子解决了过多的嵌套，因此您有几个钩子，它们具有从react-router的Link组件，可以应用于您自己的组件，以使其行为相同。 先决条件 该软件包符合并以ESM格式提供原始的稳定JavaScript代码。
react 引入第三方模块（例：引入百度地图）
qq_41898220的博客
01-28 1502
react 构建单页面应用程序，引入第三方模块，一般是通过npm下载引入 但是百度地图在npm 当中并没有第三方模块 所以此时我们就需要在应用的入口通过 src 的方式引用第三方模块 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"> 加载 bootstrap、...
react移动端登录（第三方登录）和个人执行实现
m0_54828595的博客
08-20 1112
使用react和antdMobile实现的移动端登录和个人中心页面，可第三方登录账号
React Native 内嵌h5页面(基于vue)的实现方案调研
llz0725的博客
03-02 5394
React Native 是目前流行的跨平台移动应用开发框架之一。通过采用不同的方法进行混合移动应用开发，它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native 已经成为一种流行的移动开发技术，它提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架。 在做原生开发时，一般我们会有一些加载H5网页的需求，
react组件中通过iframe嵌入html页面
热门推荐
赶路人儿
08-30 1万+
最近在一个web前端开发的项目中，遇到了这样一个需求：项目本身使用react搭建，用antd来完成各种组件的展示，有一个需求，是要将另外一个项目中的部分页面功能加进来，另外的一个项目使用的是bootstrap+ajax库写的纯html页面。 最直接的方法，将这些要加进来的页面功能使用react组件重写一遍，加到项目中，但是这样做成本非常高。于是想有没有方法，将这些html页面直接以连接的方式嵌入到现有react组件中展示。google了一下，可以通过ifram来完成。 现有的react项目使用的是【上中
React第三方组件1(路由管理之Router的使用③传参)
oKeYue的博客
01-24 586
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23 3、React第三方组件1(路由管理之Rou
React Dva项目引入antd UI框架
weixin_45966674的博客
07-05 844
然后 我们在左侧导航栏中 选择自己需要用的组件 然后 点击 下面的显示代码 看一下里面的代码。但是 我们要先加个配置 打开我们项目 在根目录下找到.webpackrc。在根目录下 找到 src下的 routes 这是我们路由的管理。然后 这里面只有一个组件 就是 我们现在页面加载的组件。我们的项目就这样起来了 但是看不出什么效果啊。我们在antd的文档中也能看到按需加载的讲解。中我们大家了一个Dva的开发环境。这样 我们的依赖包就进来了。我们界面原本的代码是这样的。这样 我们的代码就进来了。
react18 怎么引入antd ui呢？一起来学习吧~！
最新发布
weixin_43452154的博客
04-19 197
首先了解一下antd ui是什么，里面包含了很多动画效果以及ui样式，只需要搬过来，然后直接使用即可，简单方便快捷高效，和element ui一样，可以在官网查看下效果。
React中对antd-UI组件库的按需引入+自定义主题的配置
鸭绒的博客
02-08 256
1.安装依赖 yarn 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",
React组件化和UI库引入使用
chenacxz的博客
10-23 716
引入ant-design组件库 npm install antd --save yarn add antd --save 一、按需加载 加载全部的antd组件的样式（对前端性能有隐患） 需要对antd进行配置进行按需加载，需要对create-react-app的默认配置进行自定义 需要更改我们的启动插件 引入react-app-rewired并修改package.json里的启动...
react中嵌入网页_React Router 嵌套路由
weixin_34207925的博客
01-30 947
嵌套路由简单理解：就是在子页面中再设置一层新的路由导航规则。初始化基本目录根据草图分析，可以指导有两层关系，第一层是大类，第二层是子类别。先再/src目录下建立一个Pages的文件夹。然后在/Pages目录下再建立两个目录/video和/workPlace,然后在/src目录下建立一个AppRouter.js文件作为首页和路由的配置文件。目录结构如下所示:初始化基本目录- src|--Pages|...
2023年React最全UI组件库指南
莫(⊙o⊙)北
11-16 1607
这些组件库提供了丰富的UI组件，可以帮助开发者快速构建漂亮、响应式的React应用程序。
react路由嵌套路由及路由传参
q4717529的博客
04-28 293
·因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松 第一步 先安装路由依赖 yarn add react-router-dom --save yarn add react-router-config --save 第二部 配置路由文件 新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件 import React from 'react'; import Hom
react中嵌入网页_在网站中添加 React
weixin_35510737的博客
12-24 1704
根据需要选择性地使用 React。React 从一开始就被设计为逐步采用，并且你可以根据需要选择性地使用 React。可能你只想在现有页面中“局部地添加交互性”。使用 React 组件是一种不错的方式。大多数网站不是、也不需要是单页应用程序。通过仅仅几行代码并且无需使用构建工具，试试在你的网站的一小部分中使用 React。然后，你可以逐步扩展它的存在，或只将其涵盖在少数动态部件中。一分钟用上 Re...
react中使用Iframe嵌入HTML页面
qq_45437679的博客
12-16 5269
react中使用Iframe安装 react-iframe插件父组件掉用子组件iframe向父组件传递数据(我用的是jq写的iframe页面) 安装 react-iframe插件 import React from "react"; import ReactDOM from "react-dom"; import Iframe from "react-iframe"; export default class FrameLoader extends React.Component { construct
React第三方库组件
05-20
以下是一些常用的React第三方库和组件： 1. Material-UI：一个React组件库，提供了丰富的UI组件和样式，让开发人员可以快速构建漂亮的Web应用程序。 2. Redux：一个状态管理库，用于管理React应用程序中的数据流。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值