Question

我正在尝试直接通过CDN加载反应和物料ui，但无法使物料ui工作。

这是我到目前为止尝试过的代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bundleless React</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>

<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="./index.jsx" type="text/babel"></script>
</body>

</html>

index.jsx

ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));

上面的代码仅适用于React，但是当我尝试使用如下所示的实质性UI组件时，则会引发错误。

index.jsx

ReactDOM.render(
  <Button variant="contained" color="primary">
    Hello World
  </Button>,
  document.getElementById("root")
);

上面的代码在控制台中引发Button is not defined错误。我该如何解决呢？

Answer 1

将Material-ui与CDN一起使用时，请使用此example。

无法通过unpkg使用MATERIAL-UI和React

1 个答案: