React中的优雅UX与Material-UI

Material Design 是 Google 的网络设计语言，以卡片、基于网格的布局和响应式动画为中心。使用 Material-UI，一个紧凑的、可定制的、漂亮的 React 组件和实用程序集合，将 Material Design 规范用于您的 React 应用程序是轻而易举的事。

这篇文章将介绍 Material-UI 的设置、使用和主题化，以及使用 CSS-in-JS 自定义组件样式的方法。这篇文章涵盖了 Material-UI v1.x。

设置

使用 npm 或 yarn 安装 @material-ui/core。

$ yarn add @material-ui/core

# or, using npm:
$ npm install @material-ui/core

安装后material-ui就可以导入了：

import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';

字体

由于 Material Design 规范是在考虑 Roboto 和 Material Icons 的情况下创建的，因此您可能希望将它们包含在您的设计中。在此示例中，我们将从 Google 字体加载它们。

index.html（部分）

<link rel="stylesheet"
  href=“https://fonts.googleapis.com/css?family=Roboto:400,500">
<link rel="stylesheet"
  href=“https://fonts.googleapis.com/icon?family=Material+Icons">

用法

Material-UI 库由用于布局、表单、导航和其他小部件的 React 组件组成。让我们在这里讨论其中的一些。

按钮

这些组件中最简单的是 Button，从 @material-ui/core/Button 导入，单击时会产生漂亮的波纹效果。与原生 HTML <button> 一样，按钮可能包含文本、图标或任何其他 React 节点。在以下示例中，图标是从 @material-ui/core/Icon 导入的。

<Button variant="outlined" color="primary" onClick={…}>
  <Icon>location_on</Icon>
  Find me
</Button>

Button 组件值得注意的 props 包括：

variant：组件的视觉样式，可以是 contained、outlined、fab，或者默认链接样式为空。
color：primary、secondary 或 default 之一，与留空时相同的颜色。稍后我们将介绍这些颜色的自定义。
mini：如果变体设置为 fab（浮动操作按钮），则按钮的大小会减小。

上图中的所有样式都是用这三个道具实现的！ Button 组件还支持常见的 props，例如 className、aria-label、disabled 和 href。

文本域

<TextField
  label="Basic TextField" />
<TextField
  placeholder="Placeholder here"
  label="Basic TextField" />

从 @material-ui/core/TextField 导入的 TextField 的行为类似于您的标准 React 输入组件，并支持以下道具（以及其他）：

label：文本输入上方的动画标签。当组件获得焦点时，它会像上面屏幕截图中的第二个示例一样移动到输入上方。
placeholder：输入内的灰色文本占位符。
InputProps：传递给包含的输入组件的道具。

下面是一个使用 InputProps prop 将 props 传递给 Input 组件的示例：

<TextField label="Length"
  InputProps={{
    endAdornment: <InputAdornment position="end">in.</InputAdornment>,
  }}
/>

可以看到，内部的 Input 组件可以带一个 startAdornment 和 endAdornment：输入左右的修饰节点，例如图标或标签。

装饰采用 <InputAdornment> 元素作为道具。上面的例子是一个文本输入，右侧有一个 in. 装饰。

主题化

Material-UI 使用基于 JavaScript 的方法对其组件进行主题化，称为 CSS-in-JS。使用这种方法，CSS 类名是使用 JavaScript 对象生成的。如果你曾经使用过 React 的 style 属性，这些对象可能看起来很熟悉。

const styles = theme => ({
  container: {
    backgroundColor: 'blue',
    color: 'red',
    width: '75%',
    height: 5 * theme.spacing.unit
  }
});

在此示例中，styles 是一个以主题为参数并返回名为 container 的样式对象的函数。骆驼大小写的 CSS 键被分配给字符串或数值，并且主题具有可自定义的间距。

使用生成的类

要将 styles 对象传递给我们的组件，我们使用 withStyles 函数返回一个高阶组件，它将我们的类名作为名为 [X169X 的道具传递]。

const MyComponent = (props) => {
  const classes = props.classes;
  return (
    <div className={classes.container}>
      // stuff
    </div>
  );
}

export default withStyles(styles)(MyComponent);

创建自定义主题

要创建自定义主题，请使用 createMuiTheme 函数并将其返回值传递给应用程序根目录下的 MuiThemeProvider 元素。

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme();

const App = props => (
  <MuiThemeProvider theme={theme}>
    // your app
  </MuiThemeProvider>
);

现在 MuiThemeProvider 的所有子代都有统一的可定制样式！

createMuiTheme 函数通常需要一个对象来定义主题：

const theme = createMuiTheme({
  palette: {
    primary: '#e89eef',
    secondary: '#336b87'
  }
});

所有颜色，包括我们在教程前面使用的主要颜色和次要颜色，都是可主题化的。完整的选项可以在主题文档中找到。

Material-UI 是一种很好的方式，可以轻松地为您的 React 站点的控件添加精美的外观和感觉。如果您想了解更多关于该项目的信息，您可以在此处访问官方文档，或在此处了解贡献。