世界上最受欢迎的 React UI 框架Material-UI
简介
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 (
你好，世界
);
}
ReactDOM.render(, 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媒体查询）扩充套件元件的策略。 如要确保所有装置的正确渲染和触控缩放，请将响应式可视区域的元标记新增到您的元素中。 name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
CssBaseline
Material-UI 提供了可选的 CssBaseline 元件.PS
世界上最欢迎的reactjs ui 框架不是我说的，官网上有图有真相。
LOGO
