Is there a way of using Material-UI without having to go through installing all of the dependencies using NodeJS. I would love to use this in an ASP.NET Project but dont know where to begin as per installing dependencies and all of that.
Add a comment
|
2 Answers
Technically using Material UI without any frontend infrastructure is possible, but it's not recommended.
If you really don't want to use npm and other JS build/bundling tools you can use the UMD distribution of Material UI.
The Getting started (#CDN) page should help.
In short, you can add React, Babel, and Material UI using plain old script tags in your HTML:
<head>
<script
src="https://unpkg.com/react@latest/umd/react.development.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script
src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/babel-standalone@latest/babel.min.js"
crossorigin="anonymous"
></script>
<!-- Fonts to support Material Design -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
then write your JS in a <script type="text/babel"> tag:
<script type="text/babel">
const {
Button,
ThemeProvider,
createTheme
} = MaterialUI;
const theme = createTheme();
function App() {
return (
<Button>Hello, world</Button>
);
}
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
</script>
<div id="root"></div>
See https://github.com/mui/material-ui/tree/master/examples/cdn for a working example.
This solution is great for prototyping, but not suitable for production apps. The primary reason for this is low performance. Browsers must download the whole library (including the parts you don't use in your application) and Babel must compile your React app on the fly.
A much better approach is to have an ASP.NET API application and a separate frontend application using React and Material UI that is built using JS tools.
Comments
it's very easy.. Follow the below steps.
- Commit all the existing changes to your source control or backup existing code.
- delete or comment twitter bootstrap bundles in bundle config.
- using NPN .. install material design lite package.
- add all the .css and .js references to bundles.
- add new bundles you added to the layout page.
- Remember to change all the class that uses twitter bootstrap to material design lite.
useful sources:
answered Mar 30, 2017 at 10:26
Venkata K. C. Tata
5,5474 gold badges25 silver badges37 bronze badges
4 Comments
Prasad Akmar
this doesn't help!
vusaldev
3. using NPN .. install material design lite package. 4. add all the .css and .js references to bundles. But NPM install files to node_modules. This folder is hidden in project and you can't add this to BundleConfig((((.
gene
getmdl.io/started/index.html Add the two link elements and the script element as this page states.
Ali123
Thanks for your answer but i think OP meant material-ui.com which are react components design for nodejs and installable through npm.