React中什么是Material-UI以及如何正确使用它？

方石剑
2,044 阅读9分钟

为什么要重新发明CSS轮子，因为轮子已经被发明了--通过bootstrap、Foundation、Tailwind、Bulma和Semantic UI等框架，不是一次，不是两次，而是多次了。但有一个UI框架在人群中脱颖而出。Material-UI。

Material-UI是为快速建立原型、提高整体软件开发速度和快速创建用户界面而设计的。它帮助开发者把更多的时间花在他们应用程序的逻辑层上，而不是与CSS相关的界面元素打交道。Material-UI的好处是，它是为React制作的。但什么是React，为什么它是独一无二的？

什么是React？

React是一个用于构建用户界面的JavaScript库。根据 Statista的数据，它现在是最流行的前端开发框架，超过了jQuery、Express和Angular。React的独特之处在于它可以让你创建可重复使用的组件，使你的代码易于阅读和维护。当用户与React组件互动时，React会**自动更新该组件，**这使你的应用程序反应更快。

根据设计，React组件是由其功能定义的小而独立的代码片断，如表单、菜单或按钮。一个组件是一个独立的模块，可以渲染一些UI。React的创建是为了解决在构建具有随时间变化的数据的大型应用程序时所面临的问题。

构建大型应用程序与传统的 "命令式 "编程不同，在后者中，你必须编写代码，明确告诉程序如何更新用户界面。React采用声明式方法，因为它使你的代码更易读，更容易管理。

有了React，你只需描述用户界面在任何给定的时间点上应该是什么样子，这个库就会处理剩下的事情。当底层数据发生变化时，React会自动更新UI，以反映变化，这使你的代码更加简单明了。那么，Material-UI是怎么来的呢？

什么是Material-UI？

Material-UI是React的一个UI框架，它提供了各种现成的组件，可以在你的React项目中使用。开发人员可以将这些组件与Material-UI造型库一起使用，该造型库在React世界中也是可用的。

Material-UI的好处之一是，它提供了各种各样的组件，可以创建几乎任何可以想象的UI类型。例如，你可以找到像按钮、卡片、滑块这样的基本组件，以及像对话框、网格和工具提示这样更复杂的组件。

此外，Material-UI带有一个内置的主题系统，使你可以很容易地为你的应用程序创建自定义主题。你也可以使用Material-UI风格化组件库，在不使用Material UI的情况下风格化你自己的React组件。

Material-UI的特点

Material-UI有很多有趣的功能，在开发网站和应用程序时可能会有帮助。

与造型系统的互操作性

Material UI的主要优势之一是它可以与不同的造型系统互操作。这种互操作性意味着开发者可以在不同的CSS框架下使用该库，甚至可以使用普通的CSS。

例如，假设你在一个Bootstrap CSS框架项目中使用Material-UI。你可以使用Class Name属性，将Bootstrap类添加到Material-UI组件中。这将确保Bootstrap的样式被应用到Material-UI组件上。

同样地，你可以使用style属性来给Material-UI组件添加内联样式。如果你想覆盖组件的默认样式，或者你正在使用一个不包括Material-UI主题的CSS框架，这就很有用。

预建的组件

Material-UI 提供了一套预建组件，帮助你创建漂亮的网站和应用程序，同时节省时间并提高你的工作效率。你所需要做的就是为你的项目选择合适的组件，然后你就可以开始了!

有各种各样的Material-UI组件可供选择，所以你肯定能找到适合你的需求。这里有几个例子。

  • 对话框。对话框用于向用户显示重要信息。它们可以用来确认一个动作，或提供关于一个过程的信息。
  • 图标。图标是为你的项目增加视觉兴趣的一个好方法。你可以用它们来表示不同的动作，或者只是为你的设计增加一些亮点。
  • 网格。网格是一个强大的布局工具，可以用来创建复杂的、响应式的布局。
  • 排版设计。排版是任何项目的一个重要组成部分。Material-UI提供了各种选项来帮助你创建漂亮的、可读的文本。

无论你是建立一个网站还是一个应用程序，Material-UI都有你需要的预建组件，以创建一个美丽的、用户友好的界面。

可定制的主题

轻松定制Material-UI的外观和感觉的能力是其关键卖点之一。广泛的现成主题和组件风格意味着通常有东西可以满足每个人的需求，但有时你需要一点不同的东西。

只需几行代码，就可以创建你自己的主题，甚至可以定制个别组件，以获得你想要的东西。

创建一个自定义主题是很简单的。首先，你需要在你的项目的src目录下创建一个叫做theme.js的文件。在这个文件中，你将导出一个包含默认Material-UI主题重写的对象。

import { createMuiTheme } from '@material-ui/core/styles';
​
export default createMuiTheme({
palette: {
primary: {
main: '#ff4400',
},
secondary: {
main: '#00bbff',
},
},
});

正如你所看到的，我们从@material-ui/core/styles导入createMuiTheme函数，并使用它来创建一个新的主题对象。然后我们可以覆盖调色板属性来改变使用的颜色。

一旦你导出了你的主题对象，你就可以把它导入到你的应用程序中，并通过将你的根组件包裹在一个ThemeProvider组件中来使用它，就像这样。

import React from 'react';
import { ThemeProvider } from '@material-ui/styles';
import theme from './theme';
​
function App() {
return (
<ThemeProvider theme={theme}>
<div>
{/* your application code here */}
</div>
</ThemeProvider>
);
}

这就是它的全部内容!现在，你所有的组件都将使用你的自定义主题中定义的颜色。

你也可以自定义单个组件，而不必创建一个全新的主题。例如，假设你想改变appBar的颜色。你可以使用withStyles HOC来做到这一点。

import React from 'react';
import { withStyles } from '@material-ui/styles';
import AppBar from '@material-ui/core/AppBar';
​
const styles = {
root: {
backgroundColor: '#ff4400',
},
};
​
function CustomAppBar(props) {
const { classes } = props;
return (
<AppBar className={classes.root}>
{/* your app bar code here */}
</AppBar>
);
}
​
export default withStyles(styles)(CustomAppBar);

在这里，我们使用withStyles HOC来给我们的CustomAppBar组件注入一个classes道具。然后我们可以使用classes对象来访问我们之前定义的样式。

定期更新

随着Material-UI的不断普及，其开发者定期发布新的更新。 每次发布都有新的功能和组件供开发者使用。该库也会定期更新，以防止和解决任何被发现的错误。

这意味着，使用Material-UI的开发者总是可以获得最新的功能和组件。他们也可以放心，任何被发现的错误都会被迅速修复。这使得Material-UI成为开发现代应用程序的一个非常可靠的选择。

最新版本中的一些功能**包括：新的网格断点，改进的排版，增加的间距，以及新的调色板。**这些只是开发者可以利用的众多新功能中的一部分。

所有这些新功能和更新使Material-UI成为开发者的基本工具。由于其每年的发布时间表，开发人员可以始终确保他们使用的是最新和最好的版本。

文档支持

Material-UI是一个React组件库，它提供了少量优秀的用户界面元素，可以在你的React项目中使用。虽然文档支持水平并不完美，但肯定在不断提高，而且有很多方法可以让你在需要时得到帮助。

寻找帮助的第一个地方是Material-UI网站本身。该网站有一个相当不错的文档部分，对开始使用该库有帮助。还有一个社区部分，你可以提出问题并从其他Material-UI用户那里获得帮助。

如何正确使用Material-UI

这里有一些代码片段，可以帮助你开始在你的React应用中使用Material-UI。

SVG图标

import React from 'react';
import { SvgIcon } from 'material-ui';
​
const HomeIcon = (props) => (
  <SvgIcon {...props}>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </SvgIcon>
);
​
export default HomeIcon;
Material UI Fonts
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
​
const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
  },
  typography: {
    useNextVariants: true,
  },
});
​
function IntegrationReact(props) {
  const { classes } = props;
​
  return (
    <div className={classes.root}>
      <Typography variant="h5" component="h3" align="center">
        This is a sheet of paper.
      </Typography>
      <Typography variant="body2" component="p" align="center">
        Paper can be used to build surface or other elements for your application.
      </Typography>
    </div>
  );
}
​
IntegrationReact.propTypes = {
  classes: PropTypes.object.isRequired,
};
​
export default withStyles(styles)(IntegrationReact);

import TextField from '@material-ui/core/TextField';
​
function MyComponent() {
  return (
    <TextField
      id="standard-basic"
      label="Standard"
      margin="normal"
    />
  );
}

Material-UI卡片Material-UI TextField

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
​
const useStyles = makeStyles({
  card: {
    minWidth: 275,
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
  },
  title: {
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
  },
});
​
export default function SimpleCard() {
  const classes = useStyles();
  const bull = <span className={classes.bullet}>•</span>;
​
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          Word of the Day
        </Typography>
        <Typography variant="h5" component="h2">
          be{bull}nev{bull}o{bull}lent
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          adjective
        </Typography>
        <Typography variant="body2" component="p">
          well meaning and kindly.
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
​
const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.default,
  },
}));
​
function MyComponent() {
  const classes = useStyles();
​
  return <div className={classes.root}>This is my compoent</div>;
}

总结Material-UI 主题化和自定义主题

Material-UI对于那些希望尽快启动和运行的企业、初创公司和应用程序开发人员来说是非常棒的，它具有最高水平的灵活性和稳健性，并被纳入一个简单易用的框架。

如果你还没有使用Tabnine的人工智能驱动的插件，你 一定要去看看。这个插件不仅仅是另一个自动完成器--它是一个机器学习驱动的人工智能系统，可以找出你项目的代码模式，并根据最佳实践提出有用的建议。Tabnine可以帮助你的团队更快、更好、更简洁地进行整合，帮助你实现更好的产出，有效地减少认知负荷，这样你就可以专注于为你的应用程序构建正确的解决方案。

The postWhat is Material-UI and how to use it correctly?appeared first onThe Official Tabnine Blog.

avatar
文章
阅读
粉丝