在 React 中使用 Material UI 的付费版本

Question

我购买了 Material UI 个组件的完整包。我不确定如何将它与 React 一起使用。提供的说明是：

点击 Material Kit Pro React 产品附近的下载按钮（这个将在您的计算机上下载一个 zip 文件)
将下载的文件解压缩到您计算机中的一个文件夹中
打开终端
转到您的文件项目（您解压产品的位置）
运行在终端
npm 安装
然后运行 npm start

我应该先创建我的 React 应用程序吗？我不确定在哪里解压这个 Material UI 文件。解压缩后，它会创建一个与 React 应用程序相同的文件夹结构。这实际上是必要的步骤吗？

我知道您可以通过 CDN 导入——我已经走过那条路了。我的问题是我为 React 支付了这个特殊版本的 Material，所以我有各种额外的组件——none 其中的组件列在他们的网站上。下载 Material 文件只是为了我自己参考吗？

我删除了所有错误消息，但我尝试从 Material 文件创建 React 应用程序，但我收到有关已过时或不受支持的依赖项的错误。当我实际上用 Material 文件中的 src/components 文件夹替换我的 React 应用程序中的整个 src/components 文件夹时，我也收到了这些相同的消息。我试过 npm install，但我仍然收到错误。

抱歉，这是一个微不足道的问题，但我是 React 新手，每当我使用 CSS 框架时，我总是通过 CDN 导入它。这是我第一次下载整个压缩文件夹，而且再次下载——它比其他任何东西都更重要。我不想要所有 Material，但我确实需要参考它们的 CSS 并实际查看这些组件的外观，因为它们未在其网站上列出，而且我不知道所有组件名称的数量，以便能够在 React 应用程序/组件中的传统导入语句中导入它们。

FWIW，我使用的是 MacBook Pro 运行ning Big Sur — 一切都是最新的，包括 Node 和所有与 Node 相关的东西。当我创建任何 React 应用程序时，版本都是最新的。

提前致谢，这是我的第一个问题，希望我做对了！ :)

Answer 1

要在 React 中使用 Material 设计 UI 元素，您可能希望将它们分别制作成可重用的组件，然后可以根据需要将其包含到应用程序的 UI 中您目前可能正在构建。

不用自己做，已经有一个 very comprehensive Material Design React library，其中 material 元素已被制成组件，您可以根据需要传入 props 以在这样的情况下使用它们适合当前所需用例的方式。

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

它利用了几个常见的 Material 设计元素，这些元素可作为 Material-UI React 组件使用。如您所见，each component has an API 我们可以在构建应用程序时引用它来使用每个组件 UI。

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>
  );
}

如果您打算使用您购买的 Material 设计资源来制作您自己的 React material 设计组件，我建议以相同的模块化和可组合的时尚。

您购买的 is here. You would use it in the same way with a project you've already set up with. eg. create-react-app. Here's how you would include and use the button 组件似乎是组件库的文档。确保它引用的文件可用于导入到您的项目中，然后像这样导入它：

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.

我的建议是尽可能少地重新发明轮子，并且总是 see what libraries can do the job you're trying to do 但是（可能）使用比您有时间构建的更优雅、更好测试和更全面的解决方案。

您甚至可以查看类似 bit.dev which is a library of reusable modular components. Or awesome-react-components 的内容，以获取满足以下条件的精选 React 组件列表：

It solves a real problem

It does so in a unique, beautiful, or exceptional way. (And it's not super popular and well-known... no point in listing those.)

It has recent code commits!

Answer 2

在与销售基于 Material 设计的 UI 套件的公司 Creative Tim 交谈后，我获得了退款。您必须降级您的 Node 版本和可能的其他软件包才能使 React Pro Kit 正常工作。

在 React 中使用 Material UI 的付费版本

Using paid version of Material UI with React

javascript

reactjs

material-design