Google--Material Design UI素材库【React版】

原文请参照：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-icons

2.使用

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文件夹下的构建说明。