- 综合排序
- 最热优先
- 最新优先
- 来自专栏未知
GraphQL实现(前端:React + Material-UI + Recoil)
每个页面都会使用GraphQL查询或变更与后端进行通信 前端（React + Material-UI + Recoil）： 首先，确保已安装了所需的依赖： npm install @material-ui /core @material-ui/icons recoil 然后，可以使用以下示例代码： // src/index.js import React from 'react'; import ReactDOM /TaskForm'; import { CssBaseline, AppBar, Toolbar, Typography, Container } from '@material-ui/core'; RecoilRoot> </ApolloProvider> ); ReactDOM.render(<App />, document.getElementById('root')); 在上述示例中，使用了Material-UI
52910编辑于 2023-12-28 - 来自专栏大数据
前端框架与库 - Material-UI组件库
本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。 1. Material-UI简介 Material-UI 不仅提供了美观的组件，还注重组件的可定制性和灵活性。它支持主题化，使得你可以轻松调整应用的整体外观，而无需从零开始设计界面。 2. 使用前应检查当前项目依赖的 React 版本是否与 Material-UI 兼容。 示例代码 下面是一个使用 Material-UI 创建的基本按钮组件的示例： import React from 'react'; import Button from '@material-ui/core 通过以上介绍和示例，我们可以看到 Material-UI 在简化前端开发流程的同时，也带来了一些需要注意的问题。
1.9K10编辑于 2024-07-21 - 来自专栏Web前端
前端框架与库 - Material-UI组件库
本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。1. Material-UI简介Material-UI 不仅提供了美观的组件，还注重组件的可定制性和灵活性。它支持主题化，使得你可以轻松调整应用的整体外观，而无需从零开始设计界面。2. 使用前应检查当前项目依赖的 React 版本是否与 Material-UI 兼容。 示例代码下面是一个使用 Material-UI 创建的基本按钮组件的示例：import React from 'react';import Button from '@material-ui/core/ 通过以上介绍和示例，我们可以看到 Material-UI 在简化前端开发流程的同时，也带来了一些需要注意的问题。
1.5K00编辑于 2024-07-20 - 来自专栏Cellinlab's Blog
Setting Up a Dev Environment with React, Vite, TypeScript, Material-UI and TailwindCSS
}; Add Tailwind CSS to index.css @tailwind base; @tailwind components; @tailwind utilities; Install Material-UI
<CssBaseline />); } Test Tailwind CSS and Material-UI return (Hello World
<CssBaseline /> <Button variant="contained" color="primary"> Material-UI61410编辑于 2023-05-17Material-UI 从零开始掌握React组件库的设计精髓
今天我想和大家分享我使用Material-UI的心得体会，从安装配置到高级应用，带你全面了解这个强大的开源工具。无论你是React新手还是老手，这篇文章都会给你带来收获！Material-UI是什么？ 为什么选择Material-UI？在众多React UI库中，为什么我特别推荐Material-UI呢？ 快速上手Material-UI让我们直接进入实战，看看如何在项目中使用Material-UI。 实用组件探索Material-UI提供了众多实用组件。 希望这篇文章能帮助你踏上Material-UI的学习之旅！你有什么使用Material-UI的经验或问题？欢迎在评论区分享！
50110编辑于 2025-09-25来自专栏大数据React 日期时间选择器 (DateTime Picker): 从基础到高级
React 提供了多种库来简化这个过程，其中最流行的是 react-datepicker 和 Material-UI 的 DatePicker 组件。 Material-UI DatePicker: 如果你已经在使用 Material-UI，那么它的 DatePicker 组件是一个很好的选择。 DatePicker 如果你使用的是 Material-UI，可以安装 @mui/x-date-pickers 库。 DatePicker 基本用法 下面是一个简单的例子，展示如何在React应用中使用 Material-UI 的 DatePicker。 无论是使用 react-datepicker 还是 Material-UI 的 DatePicker，都可以轻松地实现日期和时间的选择功能。
4K10编辑于 2024-12-05来自专栏深入浅出区块链技术用Truffle, Solidity, React, Material UI, Web3创建一个全栈筹款Dapp
/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar from '@material-ui/core/CardContent'; 7 import CardMedia from '@material-ui/core/CardMedia'; 8 from '@material-ui/core/CardContent'; 7 import CardMedia from '@material-ui/core/CardMedia'; 8 '@material-ui/core/DialogActions'; 16 import DialogContent from '@material-ui/core/DialogContent' from '@material-ui/core/InputLabel'; 25 import OutlinedInput from '@material-ui/core/OutlinedInput
7.1K20编辑于 2022-04-11来自专栏编程微刊React常用的5个UI框架
2：Material-UI 推荐指数：star:57.9k 英文文档：https://material-ui.com Github: https://github.com/mui-org/material-ui Material-UI当下流行的 React UI 框架，组件用于更快速、更简便的 web 开发，适合小团队，或者个人项目快速搭建前端界面，可以自定义主题，Github上面的star挺多的，有超过Ant
15.5K30发布于 2020-06-04来自专栏卡拉云-低代码开发工具React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
/core/Table'import TableBody from '@material-ui/core/TableBody'import TableCell from '@material-ui/core /TableCell'import TableContainer from '@material-ui/core/TableContainer'import TableHead from '@material-ui @material-ui/icons/KeyboardArrowLeft'import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'import LastPageIcon from '@material-ui/icons/LastPage'import { makeStyles, useTheme } from '@material-ui/core /core/InputBase'import { fade, makeStyles } from '@material-ui/core/styles'import SearchIcon from '@material-ui
19.3K01编辑于 2022-07-13来自专栏一个会写诗的程序员的博客用户登录前后端分离开发实战案例：React，npm，webpack，ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UIKotlin 开发
简介 React Material-UI （https://github.com/mui-org/material-ui）是一组实现了谷歌 Material Design 设计语言的 React 组件 安装 下面我们来一步一步安装Material-UI——这个世界上最受欢迎的React UI框架。Material-UI 可作为 npm 包使用。 安装核心依赖 npm install @material-ui/core 等待依赖安装完毕，我们可以看到，此时我们的package.json文件内容新增了 "@material-ui/core": "^ from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; 使用 Button 按钮 /core/styles'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/
9.1K30发布于 2018-12-11来自专栏HelloGitHub想做前端开发？推荐几个必备珍品组件库
生态：iview-admin(开箱即用的中台解决方案)，iview-Weapp(微信小程序组件库)，iview Run(在线编辑器) MATERIAL-UI 类型：基于 React 组件库 官网：https ://material-ui.com/ GitHub仓库地址：https://github.com/mui-org/material-ui 维护团队：material-ui material-ui 是基于 material-ui 团队维护频率很高，下图是 material-ui 主要的开发者的Github首页 基本上每天的都会有提交，而且最多一天有36次的提交。 代码层面：项目中包含详细的文档、测试、例子，但是具体的代码细节我还要进一步研究生态：Material-UI Pickers(日期，时间选择器) ElementUI 类型：基于 Vue 的组件库 官网：https
3.4K50发布于 2021-05-14来自专栏grain先森React PC端框架
Material-UI 一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。Material-UI 组件是独立工作的。 Material-UI首先是移动开发的，我们首先为移动设备编写代码，然后根据需要使用CSS媒体查询扩展组件。 要确保所有设备的正确渲染和触摸缩放，请将响应式视口元标记添加到 <head> 元素。 Material-UI 3. Semantic-UI-React Semantic-UI-React有极为丰富切漂亮的UI组件库，并且结构化做得非常好。
5.3K31发布于 2019-03-28来自专栏web技术开发分享material Tree组件的前端模糊搜索
具体的代码： import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TreeView from '@material-ui/lab/TreeView'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import TreeItem from '@material-ui/lab/TreeItem
1.4K20编辑于 2022-11-14React UI组件库教程
特点：全面的组件集合： Material-UI 包括许多组件，包括按钮、菜单、表单、表格等。 移动优先的方法： Material-UI 设计为移动优先，这意味着这些组件在任何设备上都会表现出色，从智能手机到桌面设备。 可定制： Material-UI 组件可以轻松定制，以匹配你的品牌指南或应用的设计。可访问性： Material-UI 组件考虑了可访问性，这意味着残障人士也可以使用它们。 主题化： Material-UI 支持主题，因此你可以轻松地更改应用的外观和感觉2.
1.1K00编辑于 2025-02-17来自专栏编程微刊5个好用的React UI框架
图片 2：Material-UI 推荐指数：star:57.9k 英文文档：https://material-ui.com Github: https://github.com/mui-org/material-ui Material-UI当下流行的 React UI 框架，组件用于更快速、更简便的 web 开发，适合小团队，或者个人项目快速搭建前端界面，可以自定义主题，Github上面的star挺多的，有超过Ant
5.1K40发布于 2021-11-24来自专栏卡拉云-低代码开发工具7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
库，面向企业级中后台 TDesign React Mobile - 腾讯 UI 组件库，配套工具完满，设计工整，文档清晰 NutUI for React - 京东出品，移动端友好，面向电商业务场景 Material-UI Material-UI - 全球顶级 React 组件库 Google Material 设计标准 android 首先 [05-Material-UI] Material-UI 上手文档 | Material-UI Github Material-UI 是 Google Material Design 设计原则的 React 实现，是一套 React 组件库，它的前身是 Google 官方的 Material Design Material-UI 组件库不论是小项目小团队的快速迭代开发，还是长期维护的大型项目，都非常适合，Github 上 Star 高达 80K 之多，是可以闭眼选择的 UI 组件库。
23.8K23编辑于 2022-05-25来自专栏pandacode_cnReact框架 UI组件库
1. material-ui(国外) 官网: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui
52920编辑于 2023-07-07);}export default App;这段代码展示了如何使用Material-UI 解决方法：使用Material-UI提供的主题定制功能，确保悬浮按钮的颜色与全局主题保持一致。在主题配置中定义主色调和辅助色，然后应用于悬浮按钮。来自专栏Web前端React 悬浮按钮组件 FloatingActionButton
使用Material-UI库为了简化开发过程并确保样式一致性，我们可以使用流行的UI库如Material-UI来创建悬浮按钮。 Material-UI提供了丰富的预设样式和交互效果，使得开发者能够快速搭建出符合Google Material Design规范的组件。 primary" aria-label="add"> <AddIcon /> </Fab>
2.9K10编辑于 2024-12-27 - );}export default App;这段代码展示了如何使用Material-UI 解决方法：使用Material-UI提供的主题定制功能，修改滑动条的颜色、大小等样式属性。结合CSS或内联样式，进一步调整滑动条的具体样式。来自专栏Web前端
React 滑动条组件 Slider(df)
使用Material-UI库为了简化开发过程并确保样式一致性，我们可以使用流行的UI库如Material-UI来创建滑动条。 Material-UI提供了丰富的预设样式和交互效果，使得开发者能够快速搭建出符合Google Material Design规范的组件。 onChange={handleChange} aria-labelledby="continuous-slider" />
2.7K10编辑于 2024-12-28
7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐
UI 组件，配套工具完满，设计工整，文档清晰 ArcoDesign - 字节跳动 UI 组件库开源，大厂逻辑，设计文档完美 Ant Design React - 阿里前端 UI 库，面向企业级中后台 Material-UI Material-UI - 全球顶级 React 组件库 Google Material 设计标准 [05-Material-UI] Material-UI 上手文档 | Material-UI Github Material-UI 是 Google Material Design 设计原则的 React 实现，是一套 React 组件库，它的前身是 Google 官方的 Material Design Lite Material-UI 组件库不论是小项目小团队的快速迭代开发，还是长期维护的大型项目，都非常适合，Github 上 Star 高达 80K 之多，是可以闭眼选择的 UI 组件库。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号