编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

世界上最受欢迎的 React UI 框架Material-UI

wxchong 2024-09-12 21:59:08 开源技术 8 ℃ 0 评论

简介

Material-UI 组件是独立工作的。 它们是自我支持的，并只要注入它们需要显示的样式。 他们不依赖任何全局的样式表, 如 normalize.css. Material-UI目前稳定版本是v4.1.1，文档齐全，组件丰富稳定，开源团队赞助商强大，github star 48K+, Fork 数量有10K+,，支持响应式, seo友好, 支持服务器端render，reactjs 技术栈同学"居家旅行必备"啊。

快速开始

下面是来帮助您入门的一个快速示例，*而这真的是您需要的所有操作 *：

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
function App() {
 return (
 <Button variant="contained" color="primary">
 你好，世界
 </Button>
 );
}
ReactDOM.render(<App />, document.querySelector('#app'));

是的，这就是您开始使用所需的一切，截图如下：

全局变量

您能够注意到，有一些重要的全局变量，可以改善 Material-UI 的用户体验。

  • 全局CSS

当配置变量不够强大的时候，您可以使用theme的overrides来让Material-UI隐式地为您注入样式规则。 这是一个非常强大的特性。

const theme = createMuiTheme({
 overrides: {
 MuiButton: { // 组件的名称 ? / 样式表
 text: { // 规则的名称
 color: 'white', // 一些CSS
 },
 },
 },
});
  • 全局默认属性

你可以改变Material-UI所有组件的默认属性。在theme上有一个键值props是用来作这个用途的。

const theme = createMuiTheme({
 props: {
 // Name of the component ?
 MuiButtonBase: {
 // The default props to change
 disableRipple: true, // No more ripple, on the whole application !
 },
 },
});

响应式元标记

Material-UI 是先在移动设备上开发的，我们采用了首先为移动设备编写代码，然后根据需要使用 CSS media queries（CSS媒体查询）扩展组件的策略。 如要确保所有设备的正确渲染和触摸缩放，请将响应式可视区域的元标记添加到您的<head>元素中。

<meta
 name="viewport"
 content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>

CssBaseline

Material-UI 提供了可选的 CssBaseline 组件.

PS

世界上最欢迎的reactjs ui 框架不是我说的，官网上有图有真相。

LOGO

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2