43

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?

Improve this question
6
  • 2
    No, you cannot use Material-UI without React. Material-UI is a library of React components. There is not a way to use the CSS of Material-UI without leveraging React. Commented Dec 24, 2019 at 16:01
  • 3
    @RyanCogswell it's possible, not recommended. You'd have to go trough all the documentation and build out the elements in order and apply css classes material-ui.com/api/typography/#css Commented Mar 17, 2020 at 9:46
  • @JoshuaWooward No, it is not possible. The process which Material-UI uses to add the CSS classes to the DOM requires React. Commented Mar 17, 2020 at 12:03
  • 2
    Material UI is two parts, react components which easily generate html elements and applies css class, and it’s a set of css styles. If you want to go by hand and create the html structure and apply css classes, you CAN use the css from material UI. Commented Mar 17, 2020 at 16:19
  • 2
    @RyanCogswell very few things in IT are absolutely "not possible", the workaround may be ugly, convoluted, inefficient, not recommended.... but more likely than not, possible Commented May 19, 2023 at 12:12

4 Answers 4

Reset to default
14

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

I used it with some of my React projects.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

6

material-components-web works with vanilla html + javascript

based on material-design-lite

Improve this answer

Comments

4

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"

Improve this answer

5 Comments

The first approach of using the CSS classes directly only works if you have previously rendered a Typography element on the page, otherwise those CSS classes won't be part of the DOM. Examples: codesandbox.io/s/using-mui-class-names-51pmd vs. codesandbox.io/s/using-mui-class-names-fzi5s.
Once the CSS classes are in the DOM (i.e. in <style> elements in the <head>), then you can leverage them as shown in your example (<h4 class="MuiTypography-root MuiTypography-h4">Hello Bud</h4>), but the Material-UI CSS for MuiTypography-root and MuiTypography-h4 gets generated and added to the DOM the first time a Typography element is rendered. If you don't ever render a Typography element on the page, then those CSS classes won't have any styling associated with them.
@RyanCogswell That is correct. The element has to be rendered somewhere first for the css to be "injected" into the DOM. My example works because the Typography element is rendered somewhere, so the styles applied to h4. It takes extra setup and work, however still possible to generate styles for every component you'll potentially use and copy/paste those into a stylesheet. I'm surprised there isn't a full css sheet with everything generated out there.
Many of the styles have limited usefulness without the corresponding component code controlling which classes are applied to different elements. The non-interactive components (e.g. Typography, Grid) are the main ones that could be used in this manner. The interactive components (e.g. TextField) dynamically apply different CSS classes in response to focus changes and other user actions, so it wouldn't be practical to try to use that CSS without the React components.
React.createElement is still React vs. vanilla.js
4

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.