Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Material-UI for Reactjs without Node.js/NPM

Tags:

reactjs

Is there a minified material-ui version for react available somewhere?

I'm planning to include the jsx files externally in html, so was wondering is there any static/cdn resource available, apart from installing it via node/npm?

like image 472
Aseem Upadhyay Avatar asked Jul 05 '26 10:07

Aseem Upadhyay


2 Answers

Using Material-UI without NPM

<body>
  <div id="root"></div>

  <!-- React -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- MUI -->
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button } = MaterialUI; // Components are available in MaterialUI object
    
    ReactDOM.render(
      <Button variant="contained" color="primary">
         Hello World!
      </Button>, 
      document.getElementById("root") 
    );
  </script>
</body>

Reference: https://github.com/mui-org/material-ui/tree/master/examples/cdn

like image 130
95faf8e76605e973 Avatar answered Jul 07 '26 06:07

95faf8e76605e973


Yes, there is <link href="//cdn.muicss.com/mui-0.9.9/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" />. More info here: https://www.muicss.com/docs/v1/react/introduction

like image 23
Deividas Karzinauskas Avatar answered Jul 07 '26 07:07

Deividas Karzinauskas



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!