CODEWITHSUNDEEP
cssmaterial-ui
user3517228
user3517228

Reputation: 461

Material-UI without React / just with vanilla HTML, CSS & JS? Possible?

I learned Vanilla JS for some months and now I am building some basic things...

I wanna learn React soon, but for now I want to practice Vanilla JS a little bit before moving on...

I am searching a "CSS Framework" for easy prototyping (or: not caring so much about custom styles) and I really like the style of Material-UI. And because I want to learn React soon anyway, I don't really want to dig into two such things (like extra learning materialize or bootstrap).

Can I use Material-UI without React, with just vanilla HTML, CSS & JS? Can I just use the CSS styling side of things, or will this result in problems?

And can you maybe give me some tips on how to do it? Is it as simple as including a style and link tag to my HTML?

Upvotes: 42

Views: 39905

Answers (4)

milahu
milahu

Reputation: 3539

material-components-web works with vanilla html + javascript

based on material-design-lite

Upvotes: 6

J.Lindebro
J.Lindebro

Reputation: 223

yes, I guess this is possible. But maybe not Material-UI. Take a look at Material Component Web which is based on native vanilla methods such SASS/CSS and native JS.

I have even managed to integrate this lib with some React projects of mine.

Upvotes: 4

Joshua Wooward
Joshua Wooward

Reputation: 1508

Yes. It is possible. Depending on what your doing, could get messy. You can use the css classes from Material UI and native html types it renders.

<h4 class="MuiTypography-root MuiTypography-h4">Hello Bud</h4>

A Non JSX approach below is

https://reactjs.org/docs/react-without-jsx.html

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.

Use the React/Material-UI files from CDN https://github.com/mui-org/material-ui/tree/master/examples/cdn/

ReactDOM
  .render(
     React.createElement(
        MaterialUI.Typography, 
        {variant: "h4"},
        "Hello Bud"),
     document.getElementById('hello-example')
  );

The above will render a Typography Component from Material UI within a dom node with id "hello-example"

Upvotes: 4

Jean T
Jean T

Reputation: 324

Yes you can, also an alternative is Materialise, kind of a bootstrap duplicating material ui.

I used it with some of my React projects.

Upvotes: 14

Related Questions