使用付费版本的材料用户界面与React

Question

我买了全套的材料UI组件。我不知道该怎么用它和反应。所提供的指示如下：

• 按下“材料工具包”专业反应产品附近的下载按钮(这将下载到您的计算机上一个压缩文件)
• 将下载的文件解压缩到计算机中的文件夹。
• 开放终端
• 转到您的文件项目(在那里您已经解压缩了产品)
• 在终端运行
• npm安装
• 然后运行npm启动

我应该先创建我的React应用程序吗？我不知道在哪里解压缩这个材料UI文件。解压缩后，它创建了一个与React应用程序相同的文件夹结构。这是必需的步骤吗？

我知道你可以通过CDN进口-我已经走了那条路。我的问题是，我支付了这个特殊版本的材料的反应，所以我有各种额外的组成部分-其中没有一个被列在他们的网站上。下载材料文件只是供我参考吗？

我删除了所有的错误消息，但是我尝试从材料文件中创建React应用程序，并且我收到了有关依赖项的错误，这些依赖项要么已经过时，要么不受支持。当我用材料文件中的src/components文件夹替换我的React应用程序中的整个src/components文件夹时，我也收到了同样的消息。我已经尝试过npm安装，并继续得到错误。

很抱歉，如果这是一个微不足道的问题，但我是一个反应新手，每当我使用了CSS框架，我总是通过CDN导入它。这是我第一次下载一个完整的压缩文件夹，而且它比其他任何东西都更适合参考。我不想要所有的材料，但我确实需要引用他们的CSS，看看这些组件是什么样子的，因为它们不是在他们的站点上列出的，而且我也不知道所有的组件名称都能在React app / components中的传统导入语句中导入它们。

FWIW，我在一个MacBook专业运行大苏尔-一切都是最新的，包括节点和所有的事情节点相关。当我创建任何反应应用程序时，所有的版本都是最新的。

谢谢，这是我的第一个问题，我希望我做得对！)

Answer 1

在与Creative (一家销售基于材料设计的UI套件的公司)交谈后，我得到了退款。您必须降级您的Node版本和可能的其他软件包，以使工作。

Answer 2

要使用带有React的Material元素，您可能希望将每个元素都变成可重用的组件，然后根据需要将它们包含到您可能正在构建的应用程序的UI中。

与其自己动手做这件事，还没有一个非常全面的材料设计反应库，其中物质元素已经被制作成您希望在props中传递的组件，以便以适合当前所需用例的方式使用它们。

下面是一个例子，我们正在构建一张如下所示的卡片：

​

它利用了几个常用的材料设计元素，这些元素可以作为材料-UI反应组件。正如您所看到的，在构建应用程序UI时，每个组件都有一个API。和我们可以引用它来使用每个组件。

​

​

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
});

export default function MediaCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

如果您打算使用您购买的材料设计资源来制作您自己的反应性材料设计组件，我建议您以同样的模块化和可组合的方式构建这样一个库。

您购买的就在这里。组件库的文档似乎与您已经设置的项目的使用方式相同。例如：create-react-app。下面是如何包含和使用按钮组件。确保它所引用的文件可以导入到您的项目中，然后按如下方式导入：

import Button from 'components/CustomButtons/Button.js';

<Button type="button">Default</Button>
<Button type="button" color="primary">Primary</Button>
<Button type="button" color="info">Info</Button>
<Button type="button" color="success">Success</Button>
<Button type="button" color="danger">Danger</Button>
<Button type="button" color="warning">Warning</Button>
<Button type="button" color="rose">Rose</Button>

您将在src/assets/jss/material-kit-pro-react/components/buttonStyle.js和src/assets/jss/material-kit-pro-react/components/iconButtonStyle.js.中找到此组件的样式。

我的建议是重新发明尽可能少的轮子，并且总是看看库能完成你想要做的工作，但是(可能的)比您有时间构建的更优雅、更好的测试和更全面的解决方案。

您甚至可以查看类似于bit.dev的东西，它是一个可重用的模块化组件库。或用于满足以下条件的反应组件的策划者列表的太棒了-反应-组件：

• 它解决了一个真正的问题
• 它以一种独特的、美丽的或特殊的方式这样做。(而且不太受欢迎，也不出名.(没有必要列出这些。)
• 它有最近的代码提交！