Material-UI使用

最新推荐文章于 2024-10-14 11:39:01 发布
最新推荐文章于 2024-10-14 11:39:01 发布
阅读量1.4k 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiexingshishu/article/details/121410780
版权

1、安装

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/x-data-grid

 2、表格

使用DataGrid组件时，其模型中需要有属性id

有CheckBox时，使用onSelectionModelChange方法来监听选择的变化。返回的新选择模式是属性id

3、时间轴组件

需要安装@mui/lab

npm install @mui/lab
 

 

 

 参考资料：
 

安装 - MUI
 

GitHub - mui-org/material-ui at v5.1.0

                

        

        

    

  


    

      

        

            

              
                
                  kgduu
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
ra-datagrid - 将 Material-ui 的 Datagrid 集成到 react-admin

				
			

			

				

					06-08
				

			

		

		

			
				
ra-datagrid 将 Material-ui 集成到 react-admin 中。
ra-datagrid.mp4 功能 通过 dataProvider 进行服务器端过滤、排序和分页 行选择 单元格编辑 隐藏/显示列 所有 material-ui 功能（附加道具传递给它） 用法 将 react-admin 替换为导出的那个这个包。
当 Datagrid 开始自己的分页时，请确保在列表上设置 pagination={false}。
`${params.row.first_name ||
""} ${params.row.last_name ||
""}`, disableClickEventBubbling: true, }, { field: "last_seen", headerName: "Last seen", type: "date", valueGetter: (params: GridValueGetterParams) => new Date(params.row.last_seen || ""), width: 160, disableClickEventBubb

			
		

	



                

              
                



	

		

			

				
					
【Material-UI】使用指南：快速入门与核心功能解析

				
			

			

				

					lph159的博客
				

				

					08-04
					
					2178
					
				

			

		

		

			
				
本文详细介绍了如何在React项目中使用Material-UI，包括快速入门、全局设置、响应式设计和最佳实践。通过正确理解和应用Material-UI的特性，开发者可以构建出美观、响应迅速且一致的Web应用。快速入门：简单易用的组件导入和使用方式。全局设置：响应式元标签和CssBaseline的使用，确保应用在不同设备上的一致表现。响应式设计：使用Grid系统实现灵活布局。最佳实践：保持组件的一致性，关注性能优化和可访问性。

			
		

	



                


  
              

                


	

		

			

				
					
【Material-UI】Lists组件中的Customization功能详解

				
			

			

				

					lph159的博客
				

				

					09-02
					
					868
					
				

			

		

		

			
				
Lists组件是Material-UI中一个重要的UI元素，它被广泛用于展示数据列表、菜单选项、导航等内容。Lists组件由多个子组件组成，包括ListItem等，这些子组件可以组合在一起构建复杂的UI结构。在本文中，我们详细介绍了Material-UI中Lists组件的定制化方法，包括主题定制、styledAPI以及样式覆盖。通过这些方法，开发者可以根据具体的设计需求灵活调整组件的外观和行为，从而打造出独特的用户界面。

			
		

	





	

		

			

				
					
使用Material UI模态框，打造精美弹窗效果的秘密

				
			

			

				

					centaurusR的博客
				

				

					05-10
					
					1428
					
				

			

		

		

			
				
Material UI 采用了 Google 的 Material Design 系统，这是一种视觉语言，旨在统一跨产品和平台的用户体验。使用 Material UI 组件，你可以轻松创建自然直观的界面，无论在哪种设备上使用都能有相同的体验。除此之外，Material UI 组件还提供了高度的可定制性，让你可以按照任何项目的具体要求进行个性化定制。

			
		

	



		

			
		



	

		

			

				
					
React框架之MaterialUI详解 （一）开始

				
			

			

				

					zxmatline的博客
				

				

					02-05
					
					1711
					
				

			

		

		

			
				
React框架有很多，基本上主流的我都用过，小众的我也用过，但是MaterialUI是我用的最顺手的一个框架，几曾何时我也想过自己整一个框架，后来还是放弃了，主要是精力和时间跟不上。再说了，就是现在的框架已经非常优秀了， 没有必要再一个轮子。Material UI 是一个开源的 React 组件库，实现了 Google 的 Material 设计风格。它功能全面，开箱即用。

			
		

	





	

		

			

				
					
Material UI 自定义 (TypeScript)

				
			

			

				

					Baby_Bus666的博客
				

				

					05-31
					
					1419
					
				

			

		

		

			
				
Material UI 中的某些组件内部还有其他嵌套组件。例如，一个组件内部Dialog有一个组件。Paper为了自定义嵌套组件的属性，它公开了一个名为的属性，PaperProps您可以使用它来执行此操作。您必须检查才能了解每个组件的所有可用属性。

			
		

	





	

		

			

				
					
material-ui-dropzone:Material-UI文件上载dropzone

				
			

			

				

					04-28
				

			

		

		

			
				
物质下落区Material-UI-dropzone是使用的组件，它基于出色的库。 此组件在对话框内部提供文件上传放置区或文件上传放置区。 文件上传放置区具有一些令人眼花File乱的“允许/不允许文件”效果，预览和警报。安装npm ...

			
		

	





	

		

			

				
					
material-ui-tree:具有material-ui v4的React树组件

				
			

			

				

					05-02
				

			

		

		

			
				
 如果在bit.dev上使用material-ui组件，则还可以在bit上使用此material-ui-tree组件。 另请参阅 。  npm install @bit/shallinta.material-ui-tree.material-ui-tree --save npm install @bit/shallinta.material-ui...

			
		

	





	

		

			

				
					
react-material-ui-form-validator:用于使用Material-UI组件设计的表单的简单验证器

				
			

			

				

					05-11
				

			

		

		

			
				
材质用户界面表单的验证组件安装npm install react-material-ui-form-validator版本号0.x，1.x-支持Material-ui <= 0.x ^ 2.0.0-支持material-ui> = 1.x || 3.x || 4.x 的实现迁移指南从<2> = 2.1.1 为了避免遗留...

			
		

	





	

		

			

				
					
material-ui-pickers:日期和时间选择器，使用:red_heart:为@ material-uicore构建

				
			

			

				

					05-03
				

			

		

		

			
				
这是有关如何开始使用@material-ui/pickers 。  文献资料 查看文档网站  最近更新了吗？  更改日志在这里可用  贡献 有关如何捐款的信息，请参见CONTRIBUTING文件。  执照 该项目是根据MIT许可条款获得许可的

			
		

	





	

		

			

				
					
formik-material-ui:在Material-UI中使用Formik的绑定

				
			

			

				

					04-29
				

			

		

		

			
				
在"formik-material-ui-master"压缩包中，你可能找到以下内容：  - `src`目录：包含项目源代码，如绑定组件的实现。 - `example`目录：可能包含使用这个库的示例代码，帮助你快速理解和开始使用。 - `package.json`...

			
		

	





	

		

			

				
					
推荐开源项目：MaterialUI - 现代化Unity界面设计的利器！

				
			

			

				

					gitblog_00082的博客
				

				

					05-17
					
					469
					
				

			

		

		

			
				
推荐开源项目：MaterialUI - 现代化Unity界面设计的利器！
去发现同类优质开源项目:https://gitcode.com/
1、项目介绍
MaterialUI 是一个基于Google官方Material Design指南的Unity用户界面（UI）套件。这个项目旨在为Unity开发者提供一套符合现代设计美学的组件和工具，帮助他们轻松创建出美观且用户体验良好的游戏或应用界面。
新版更...

			
		

	





	

		

			

				
					
Material-UI入门文档

					
热门推荐

				
			

			

				

					雾都
				

				

					09-23
					
					1万+
					
				

			

		

		

			
				
Material-UI看着官网文档用自己的语言翻译一下，因为一直找不到Material-UI的中文文档。。。心累

			
		

	





	

		

			

				
					
react使用Material UI实现类似淘宝tab居中切换效果

				
			

			

				

					徐同保的专栏
				

				

					09-02
					
					750
					
				

			

		

		

			
				
react使用Material UI实现类似淘宝tab居中切换效果

			
		

	





	

		

			

				
					
Material UI 的安装与使用

				
			

			

				

					zheng_jia_jun的博客
				

				

					07-30
					
					3879
					
				

			

		

		

			
				
学习完这个框架的使用后，我写了个基于MUI+React的移动端考试页面，如果需要可以clone下来查看下如何使用MUI,如果可以的话希望给个start谢谢!请注意，安装依赖于react的17.0.0及以上版本，和react-dom>=17.0.0及以上版本。材料UI设计精美，并具有一套自定义选项，可以在我们的组件之上轻松实现自己的自定义设计系统。是一个开源的React组件库，实现了Google的MaterialDesign。安装成功后就可以在组件用引用了，查看示例。......

			
		

	





	

		

			

				
					
MaterialUI中文使用指南

				
			

			

				

					m0_37964621的博客
				

				

					03-11
					
					9504
					
				

			

		

		

			
				
目录MaterialUI安装简单使用指南主要使用的组织社区地址许可证类型常用组件介绍Avatar小览属性列表样式属性
MaterialUI
ReactUI组件库，用于快速构建界面和设计系统。官网默认版本为v4.11.1(截止到2021年3月11日)。
安装
支持使用npm或者使用CDN加载。
npm
npm install @material-ui/core

CDN
加载Roboto字体
<link rel="stylesheet" href="https://fonts.googleapis.co

			
		

	





	

		

			

				
					
【Material-UI】深入解析现代Web开发中的UI利器

				
			

			

				

					lph159的博客
				

				

					08-04
					
					926
					
				

			

		

		

			
				
Material-UI作为现代Web开发中的重要工具，为开发者提供了丰富的组件和高度可定制的主题系统。通过正确理解和使用Material-UI的特性，开发者可以快速构建出色的用户界面，并确保应用的可维护性和扩展性。丰富的组件库：涵盖常用UI元素，方便快捷地构建界面。灵活的主题定制：支持高度定制的主题，满足不同的设计需求。响应式设计：轻松实现适配各种设备的布局。最佳实践：通过合理使用和优化，提高应用的性能和用户体验。Material-UI的广泛应用和活跃社区使其成为React开发者的首选工具之一。

			
		

	





	

		

			

				
					
【Material-UI】详解安装指南

				
			

			

				

					lph159的博客
				

				

					08-04
					
					973
					
				

			

		

		

			
				
本文详细介绍了如何在项目中安装和配置Material-UI。无论是默认的Emotion样式引擎，还是替代的styled-components，您都可以根据项目需求进行选择。同时，我们还介绍了如何添加Roboto字体和Material Icons图标，确保您的应用拥有一致且美观的用户界面。通过正确的安装和配置，Material-UI将成为您React项目中不可或缺的工具。希望这篇推文能帮助您快速上手Material-UI，构建出色的Web应用。

			
		

	





	

		

			

				
					
现代化 React UI 库：Material-UI 详解！

					
最新发布

				
			

			

				

					kekobinxinzhanghu的博客
				

				

					10-14
					
					578
					
				

			

		

		

			
				
现代化 React UI 库：Material-UI 详解！Github Star数高达94K！

			
		

	





	

		

			

				
					
material-ui npm安装

				
			

			

				

					08-25
				

			

		

		

			
				
Material-UI是一个流行的开源库，用于在React应用中快速构建用户界面，它基于Google的Material Design设计语言。要通过npm在项目中安装Material-UI，你需要执行以下步骤：

1. **确保已安装Node.js**：首先，确保你在本地计算机上已经安装了Node.js和npm (node包管理器)。

2. **打开终端或命令提示符**：在项目的根目录下，打开终端或命令提示符。

3. **初始化项目（如果尚未完成）**：运行 `npm init` 或 `yarn create react-app` 创建一个新的React项目，这将自动安装一些基本依赖。

4. **安装material-ui**：在项目目录下运行 `npm install @material-ui/core` 或 `yarn add @material-ui/core` 来安装Material-UI核心组件。如果你需要其他样式或功能，可以添加相应的依赖，比如 `@material-ui/icons`、`@material-ui/lab` 等。

5. **引入到项目中**：在你的`.js` 文件中，使用 `import` 导入需要的组件，如 `import Button from '@material-ui/core/Button';`

6. **配置主题**：如果你希望定制Material-UI的主题，可以创建并设置theme文件，例如 `createMuiTheme()` 和 `ThemeProvider`。

安装完成后，你就可以开始使用Material-UI丰富的组件库构建你的UI了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
kgduu

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值