原文请参照：https://material-ui-next.com/
Material-UI v1.0.0-beta.23
上手
1.安装
Material-UI可作为npm包使用。
npm
安装npm，保存相关依赖项到package.json，运行：
npm install --save material[email protected]Roboto Font Roboto字体
Material-UI库基于Roboto字体设计，请确保遵照一下说明。
Icon Font 图标字体
使用图标字体组件或直接在支持的组件中使用图标名称，必须先添加材料图标字体。以下为操作说明。
SVG Icons SVG图标
使用预构建的SVG素材图标，如组件演示中的图标，需先安装material-ui-icons软件包：
npm install --save material-ui-icons2.使用
Material-UI组件相互独立，自我支持。他们会注入或只注入需要显示的样式，不依赖像normalize.css这样的全局样式。
用户可以使用文档中的任意组件。
请参考每个组件的演示页面，了解如何导入。
以下是一个方便快速入手的例子：
react应用入口：import React from ‘react‘; import { render } from ‘react-dom‘; import Button from ‘material-ui/Button‘; function App() { return ( <Button raised color="primary"> Hello World </Button> ); } render(<App />, document.querySelector(‘#app‘));
创建简单窗口展示：
import React from ‘react‘;
function Usage() {
return (
<iframe
title="codesandbox"
src="https://codesandbox.io/embed/4j7m47vlm4?hidenavigation=1&fontsize=14&view=preview"
style={{
width: ‘100%‘,
height: 350,
border: 0,
borderRadius: 4,
overflow: ‘hidden‘,
}}
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>
);
}
export default Usage;
在浏览器内显示为：
已经了解了基本设置，接下来，是时候了解更多：
如何提供素材设计字体和排版？
如何利用主题解决方案？
如何覆盖组件的外观和感觉？
3.项目示例
在/ examples文件夹下的GitHub存储库（https://github.com/mui-org/material-ui）中，提供了一些示例项目。
- 创建一个React App应用程序（https://github.com/mui-org/material-ui/examples/create-react-app/）
- Next.js（https://github.com/mui-org/material-ui/examples/nextjs/）
- 用流创建React应用程序（https://github.com/mui-org/material-ui/examples/create-react-app-with-flow/）
- 用TypeScript创建React应用程序（https://github.com/mui-org/material-ui/examples/create-react-app-with-typescript/）
该文档站点的源代码也包含在存储库中。
这是一个稍微复杂的项目，可查看/ docs文件夹下的构建说明。