Search code examples
asp.netasp.net-mvcmaterial-ui

How to add material styles to ASP.NET MVC web app?

How do I add material styles to my asp.net mvc project? I just need to have material checkboxes, switches, datepickers, and inputs with floating labels. I already tried Material-UI and a few others, but they don't seem to work 100%. I can't get any of the checkboxes and stuff to work.

I "initialized" the matieral-ui in _Layout.cshtml as so:

<link rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript"
        src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>

And the styles are applied, but I can't change the default color (Which seems to be green), floating labels are weird, and datepickers still have the native .net appearance.

Labels look like this:

enter image description here

And date pickers look like this:

enter image description here

But they both should look like this:

enter image description here

enter image description here

Can Material-UI not do this? Is so, how do I do it in ASP.NET MVC? I'm super new to .NET, so please forgive my naivety if the answer is obvious.

Solution

  • So the best solution I could find is to add materialize-css via npm and then copy the materialize.min.css and js files into a directory in my wwwroot folder and refrence them both in the _layout.cshtml.