How to add material styles and components to ASP.NET MVC web app? RRS feed

  • Question

  • User-462241089 posted

    Hey, this is my first post, so please forgive me if I sound uninitiated. I am also very new to .net.

    I'm trying to add material styles to my .net web app, but I can't seem to figure out how to do it. I tried adding Materialize and Material-UI via NPM, but I can't get either one to work properly. I started with this tutorial, but I don't think it actually works.

    I really just need the material datepicker, checkboxes, switches, and floating labels. How do I add this to my project?

    Tuesday, June 16, 2020 7:16 PM

All replies

  • User-474980206 posted

    material-ui is a react component library. you would just reference the components from your react code.

    Materialize is probably what you want. you can just use the CDN or bower install:


    the npm module is for rebuilding the sources or using a npm based tool chain, say webpack or gulp.

    note: you will need a separate date picker, materialize does not contain one. just google: materialize datapicker

    Tuesday, June 16, 2020 7:36 PM
  • User-462241089 posted

    Thanks for the help, bruce! I'm trying it all out now. I found this datepicker, but will it work? Would this one be better? I want to avoid jquery in this project.

    Tuesday, June 16, 2020 7:39 PM
  • User-462241089 posted

    Also, I just tried adding it via CDN, by insrting this code into my _Layout.cshtml file:

    <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    And I do seem to have some material styles implementing, but they are stuck on a green default color scheme. How do I change the color? The docs are unhelpful here...

    Tuesday, June 16, 2020 7:44 PM
  • User-474980206 posted

    they are the same datepicker. appears materialize has one. I use react & bootstrap instead.

    to theme, just like bootstrap you either override the CSS or build you own css file with SASS by updating the variable file.


    to build you own, you can fork the project and update the variable, or down load and build. if you have your own preffered SASS compile you can just use the sass folder. 


    I'd probably fork the project. then you could sync changes and updates under source control.

    Tuesday, June 16, 2020 10:26 PM
  • User1686398519 posted

    Hi MarcusAtMars,

    • You can add some packages through NuGet.You can refer to this link for NuGet.
    • I suggest you can use bootstrap-datepicker, this can display the date.How to add bootstrap-datepicker, please refer to the following.
    • For style files, you can use bootstrap, which contains many styles, you can refer to this link.
    • For using checkbox in MVC, you can refer to this link.
    <input class="date_range_filter date" type="text" id="Date" />
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    <link href="~/Content/bootstrap-datepicker.min.css" rel="stylesheet" />
    @section scripts{
        <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

    Here is the result.

    How to add bootstrap-datepicker

    Best Regards,


    Wednesday, June 17, 2020 9:32 AM
  • User-462241089 posted

    Hi, YihuiSun, Thanks for the tip, but I already have that in place. I need the picker to be stylized to look like a material datepicker, so like this:

    Wednesday, June 17, 2020 1:24 PM
  • User-462241089 posted

    I tried adding this to my _variables.cshtml file, but it doesn't seem to apply it:

    $primary-color: color("materialize-red", "lighten-2") !default;
    $primary-color-light: lighten($primary-color, 15%) !default;
    $primary-color-dark: darken($primary-color, 15%) !default;
    $secondary-color: color("teal", "lighten-1") !default;
    $success-color: color("green", "base") !default;
    $error-color: color("red", "base") !default;
    $link-color: color("light-blue", "darken-1") !default;

    Wednesday, June 17, 2020 1:26 PM
  • User-474980206 posted

    You can not override sass variables. You need to override the output css. This will require learning the materials css and a good understanding of css.

    For what you want, download and build a new materials css file. Just read the docs. The build script uses grunt-sass, but you can use any sass compiler you like. 


    Wednesday, June 17, 2020 2:40 PM
  • User-462241089 posted

    Huge thanks, Bruce! I've opted to just override the colors of all the elements I'm using, since I am in a time crunch.

    I do want to ask, though, do you know how I can change the layout of the datepicker? It looks like it does here, but I need it to look like this vertical material one.

    Can I customize this in the options? If so, how?

    Wednesday, June 17, 2020 3:47 PM
  • User-474980206 posted

    its response via a media query, so if you just use the browser debugger, you can see the changes.

    Wednesday, June 17, 2020 7:42 PM