材料设计是谷歌为网页设计的设计语言,围绕地图、基于网格的布局和响应式动画。使用 Material-UI,React的组件和实用工具的紧凑、可自定义和美丽的集合,将材料设计规格用于您的React应用程序是一个惊喜。
本文将涵盖 Material-UI 的设置、使用和主题化,其自定义方法是使用 CSS-in-JS 来定制组件。
设置
使用 npm 或 yarn 来安装 @material-ui/core。
1$ yarn add @material-ui/core
2
3# or, using npm:
4$ npm install @material-ui/core
安装后,材料UI可进口:
1import Button from '@material-ui/core/Button';
2import Card from '@material-ui/core/Card';
来源
由于材料设计规格是用Roboto和材料图标创建的,您可能希望将它们纳入您的设计中,在本示例中,我们将从Google字体中加载它们。
1[label index.html (partial)]
2<link rel="stylesheet"
3 href=“https://fonts.googleapis.com/css?family=Roboto:400,500">
4<link rel="stylesheet"
5 href=“https://fonts.googleapis.com/icon?family=Material+Icons">
使用
Material-UI 图书馆由 React 组件组成,用于布局、表单、导航和不同类型的小组件。
按钮
这些组件中最简单的是按钮,从@material-ui/core/Button中导入,在点击时会产生微妙的 ripple 效应. 与本地 HTML<button>一样,按钮可能包含文本、图标或其他任何 React 节点。
1<Button variant="outlined" color="primary" onClick={…}>
2 <Icon>location_on</Icon>
3 Find me
4</Button>
按钮组件的显著优势包括:
- 变量:组件的视觉风格,要么是
包含,要么是突出,要么是fab,要么是默认的链接风格是空的 *颜色:其中一个是主要,次要或默认,它是相同的颜色,就好像它是空的。
上面的图像中的所有风格都只使用了这三个补丁! 按钮组件还支持 className、aria-label、 disabled 和 href 等常见补丁。
文本场
1<TextField
2 label="Basic TextField" />
3<TextField
4 placeholder="Placeholder here"
5 label="Basic TextField" />
TextField 是从 `@material-ui/core/TextField 导入的,它像您的标准 React 输入组件一样运行,并支持以下特性(包括):
- 标签:在文本输入上方的动画标签.当组件集中时,它像上面的屏幕截图中的第二个示例一样移动到输入上方 *位置持有者:输入内部的灰色文本位置持有者
- InputProps:向包含的输入组件 传输的特性。
下面是使用 InputProps 附件传输附件到 Input 组件的示例:
1<TextField label="Length"
2 InputProps={{
3 endAdornment: <InputAdornment position="end">in.</InputAdornment>,
4 }}
5/>
正如您所看到的,内部输入组件可以开始Adornment 和 endAdornment:化妆品节点在输入的左侧和右侧,如图标或标签。
装饰品将一个<InputAdornment>元素作为支持,上面示例是一个文本输入,右侧有一个化妆品装饰。
主题
Material-UI 使用基于 JavaScript 的方法来主题其组件,称为 CSS-in-JS。 使用这种方法,CSS 类名称使用 JavaScript 对象生成。
1const styles = theme => ({
2 container: {
3 backgroundColor: 'blue',
4 color: 'red',
5 width: '75%',
6 height: 5 * theme.spacing.unit
7 }
8});
在本示例中,样式是将主题作为参数并返回名为容器的样式对象的函数。
使用生成的类
要将风格对象传递给我们的组件,我们使用与风格函数返回一个高级组件(https://andsky.com/tech/tutorials/react-higher-order-components),该组件将我们的类名称传递为一个名为类的标签。
1const MyComponent = (props) => {
2 const classes = props.classes;
3 return (
4 <div className={classes.container}>
5 // stuff
6 </div>
7 );
8}
9
10export default withStyles(styles)(MyComponent);
创建一个习惯主题
若要创建自定义主题,请使用创建MuiTheme函数并将其返回值传送到应用程序根部的MuiThemeProvider元素。
1import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
2
3const theme = createMuiTheme();
4
5const App = props => (
6 <MuiThemeProvider theme={theme}>
7 // your app
8 </MuiThemeProvider>
9);
现在MuiThemeProvider的所有孩子都有一个均匀的自定义风格!
createMuiTheme函数通常需要一个对象来定义主题:
1const theme = createMuiTheme({
2 palette: {
3 primary: '#e89eef',
4 secondary: '#336b87'
5 }
6});
所有颜色,包括我们在教程中使用的主要和次要颜色,均可主题化。