在Reactjs app中包含材料ui

时间:2017-11-07 21:21:05

标签: reactjs material-ui

我正在尝试为我的react js app添加cdn link。包含材料ui的链接是什么。 http://www.material-ui.com/#/

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
<div id="container" style="font-style: italic;"></div>

<script type="text/babel">
    var destination = document.querySelector("#container");

    ReactDOM.render(
            <h1>My First App</h1>,
        destination);
</script>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

包含材料ui的方式是通过npm而不是像传统前端框架或库那样的CDN链接。

正确的方法是通过npm包。

您可以通过运行

来安装库
npm install material-ui

然后你可以在反应组件中使用它,如下所示

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

您可以在此处详细了解http://www.material-ui.com/#/get-started/installation