For investors
股价:
5.36 美元 %For investors
股价:
5.36 美元 %认真做教育 专心促就业
简介
Material-UI 组件是独立工作的。 它们是自我支持的,并只要注入它们需要显示的样式。 他们不依赖任何全局的样式表, 如 ormalize.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 框架不是我说的,官网上有图有真相。