Is it possible to use Material-UI without React, and instead with just vanilla HTML, CSS, and JS?

After spending some time learning Vanilla JS and working on basic projects, I am eager to dive into React. However, before making the switch, I want to spend a little more time practicing Vanilla JS.

In my search for a CSS framework that would make prototyping easier and allow me to focus less on custom styles, I came across Material-UI. Since I plan to learn React soon anyway, I prefer not to deal with multiple frameworks like Materialize or Bootstrap.

I'm curious if it's possible to use Material-UI without React, sticking solely to vanilla HTML, CSS, and JS? Will using only the CSS styling cause any issues?

If so, could you provide some guidance on how to go about it? Is it as simple as including a style and link tag in my HTML document?

cssmaterial-ui

Answer №1

Absolutely, another option to consider is Materialise, which mimics material ui while offering a bootstrap-like experience.

I have incorporated it into several of my React endeavors.

Answer №3

Absolutely possible! Just be prepared for things to possibly get messy depending on the task at hand. You have the option of utilizing the css classes provided by Material UI along with the native html types it renders.

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

If you prefer a Non JSX approach, check out:

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

Remember that each JSX element is essentially just shorthand for calling React.createElement(component, props, ...children). This means anything achievable with JSX can also be accomplished using plain JavaScript techniques.

You can include the necessary React/Material-UI files from CDN like so: https://github.com/mui-org/material-ui/tree/master/examples/cdn/

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

The code snippet above will display a Typography Component sourced from Material UI within a specific dom node identified as "hello-example".

Answer №4

Absolutely, it is definitely possible. However, instead of Material-UI, you might want to explore Material Component Web. This framework utilizes native vanilla methods like SASS/CSS and pure JS.

Personally, I have successfully incorporated this library into a few of my React projects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the submission of a form be prevented in PHP after encountering a ctype_digit error?

As a new learner in PHP, I am trying to figure out how to prevent the form from submitting to MySQL if the user enters anything other than an integer in the Age field. Below is the basic form and code I have: add.html-> <form action="add.php" m ...

javascriptphpcssmysql

Utilize jQuery to duplicate the image source and set it as the background for a div element

I'm struggling with cloning the URL string from the src attribute of an image. My goal is to store the string as a variable so that I can use it to update the background-image CSS property. ... Taking an image and setting it as a background in another ...

jqueryhtmlcssimageweb

Troubleshoot padding problems in mpdf

Note: mpdf 6.0 Greetings, In my efforts to produce precise PDFs using mpdf for future printing purposes, I have encountered an issue with the positioning of elements on the page. I require these elements to be positioned precisely from the top left corne ...

cssmpdf

Loading a webpage once the loading bar has completed

Is there a way to modify the JavaScript code for my progress bar that loads from 1 to 100 percent so that it automatically redirects to another page when reaching 100%? Here is the current JavaScript code: var i = 0; function move() { if (i == 0) { ...

javascripthtmlcss

Displaying Tabular Data Over an Image Using HTML and CSS

I've been attempting to place this table in front of this image and it's just not working out. I understand that the table isn't perfect, it's just a simple example! HTML <section> <div class="image-wrapper"> <img ...

htmlcss

Combining CSS and JavaScript to handle two events with a single onClick

Here is the code I've created: <a href="#" id="home" class="showLink" onclick="showHide('example');return false;"> <li class="buttons">home</li> </a> <a href="#" id="user" class="showLink" onclick="showHide(&a ...

javascripthtmlcss

Maintain the button's placement

Hey there, I'm a newcomer to the world of development. Currently, I am working on a project that involves a button within a flex container setup. Here is the code snippet for the button: <div class="flex-item flex-item-button" > ...

htmlcssflexbox

Is there a way to customize Material UI theme types and make adjustments to existing types using Typescript?

One way to customize the material ui theme is by extending its type and adding new properties, as shown here: For example, if we want to add an appDrawer property, it can be done like this: declare module '@material-ui/core/styles/createMuiTheme&apos ...

reactjstypescriptmaterial-uimaterial-design

What is the best way to apply a class to a container when a component in AngularJS receives focus or is clicked?

I am trying to apply a class to the container when either the input field is focused or when the dropdown component receives focus or is clicked. The class should be removed when the focus is lost. The requirement is for the input container to have the &a ...

javascriptcssangularjs

Combining Django Bootstrap input-group-addon with Model Form for seamless field integration

Currently, I am displaying my Django form in the following manner: <form action="/student/" method="post"> {% csrf_token %} {% bootstrap_form form %} <input type="submit" value="Launch" class="btn btn-primary"/> </form> I ha ...

pythonhtmlcssdjangotwitter-bootstrap-4

Div that scrolls only when children can be displayed without overflowing

I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety. HTML <div id="container"> <div class="child"></div> <div class="child"></div> <div class= ...

htmlcss

Having trouble with a nonresponsive link on a website? Unable to hover over it

The website can be found at: I've been trying to click on the "Home" link on the left side, but it doesn't seem to work for me. Any thoughts on why this might be happening? ...

htmlcss

Clicking on Fixed Positioning triggers a reset

When I activate the sidebar by clicking the menu button, it remains fixed in position until the first scroll. However, if I interact with the sidebar by clicking on it, the button resets and goes back to the top of the page. This issue seems to only occur ...

javascriptjqueryhtmlcss

The mobile version of my website's home page is not displaying certain elements of the featured image

I'm in the process of launching a fresh new blog with Flask as the backend. Currently, I'm using a Bootstrap template and have set an image as the featured image. While it displays properly on computers, tablets crop it out. You can check out the ...

htmlcssflaskbootstrap-4web-deployment

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: https://i.sstatic.net/WR55a.jpg Managed to get it done using position absolute and @media screen for image size and padd ...

htmlcsstwitter-bootstrap-3flexboxdisplay

Blending Material-UI with Typescript

I am a TypeScript beginner and I'm currently following an example from the material-ui repository. The code snippet in the example is using the root CSS class. However, I am looking to include additional CSS classes alongside 'root'. const ...

material-ui

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is ...

javascripthtmlcsssass

The comparison between dynamically adding elements through Javascript and hiding them using CSS

I am contemplating the advantages and disadvantages of adding elements to a page and setting display:none versus creating a function that dynamically generates the elements and appends them where needed. In my current situation, I am implementing a reply ...

javascripthtmlcss

Having trouble arranging the elements when swapping within a pop-up modal

When I drag and drop two divs inside a modal popup, their positions shift down during the animation. I am struggling to fix this issue. HTML Code: <title> Tile Swapping with Animation</title> <body> <button type="button" class=" ...

javascriptjquerycssjquery-uijquery-ui-draggable

issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

htmlcssfirefoxflexboxcross-browser