I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="utf-8" />
<title>Bridge Bridge.React.Examples</title>
<link rel="stylesheet" href=":300,400,500">
<link rel="stylesheet" href="+Icons">
<script crossorigin src="@16/umd/react.development.js"></script>
<script crossorigin src="@16/umd/react-dom.development.js"></script>
<script crossorigin src="/@material-ui/core/umd/material-ui.development.js"></script>
</head>
<body>
<div id="main"></div>
<script>
ReactDOM.render(
React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
document.getElementById('main')
);
</script>
</body>
</html>
I have this error. Could you please help?
'Button' is not defined
I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bridge Bridge.React.Examples</title>
<link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
<script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg./@material-ui/core/umd/material-ui.development.js"></script>
</head>
<body>
<div id="main"></div>
<script>
ReactDOM.render(
React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
document.getElementById('main')
);
</script>
</body>
</html>
I have this error. Could you please help?
Share Improve this question asked Feb 11, 2019 at 18:26 user1576055user1576055 5841 gold badge6 silver badges20 bronze badges'Button' is not defined
3 Answers
Reset to default 3UPDATE
For v3 (when this answer was originally written) the window variable was 'material-ui'. In v4 this was changed to 'MaterialUI'. The answer has been updated accordingly.
Since you aren't using JSX in your example, you don't need babel. You just need to define Button before using it via const {Button} = window['MaterialUI'];.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bridge Bridge.React.Examples</title>
<link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
<script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg./@material-ui/core/umd/material-ui.development.js"></script>
</script>
</head>
<body>
<div id="main"></div>
<script>
const {
Button
} = window['MaterialUI'];
ReactDOM.render(
React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
document.getElementById('main')
);
</script>
</body>
</html>Even if you import material-ui framework, you need to indicate where the Button ponent has to be found.
The problem is, I'm not sure it's possible without using babel.
You will find a plete exemple here in the Material-UI doc
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bridge Bridge.React.Examples</title>
<link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons">
<script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg./@material-ui/core/umd/material-ui.development.js"></script>
<script src="https://unpkg./babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
const {
Button
} = window['material-ui']
ReactDOM.render(
React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
document.getElementById('main')
);
</script>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745603502a4635539.html
评论列表（0条）