Materialize 遇到的问题

遇到的问题：

1. because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 或者不显示设置的背景颜色

• 参考答案链接：
  https://stackoverflow.com/questions/48521971/mime-type-error-when-adding-a-css-file-to-angular/49269425#49269425
• 不需要修改 index.html，按照官网添加下面代码就会报上面的错

 <link type="text/css" rel="stylesheet" href="../node_modules/materialize-css/dist/css/materialize.min.css"
    media="screen,projection" />

• 只需要修改 angular.json
  "styles": [
  "src/styles.css",
  "node_modules/materialize-css/dist/css/materialize.min.css"
  ]

2. dropdown 不能使用

解决方法： 加入下面的javascript 代码激活 menu

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });

To activate the dropdown menu, insert this line of code into your JavaScript file, within the $( document ).ready(function) block

By default, the dropdown menu is activated by hovering over the dropdown trigger. To activate the dropdown menu on click, pass { hover: false } into the above dropdown() function

3. search bar 格式丑陋

nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
} 这个貌似不起作用，下面的有用
input[type="search"] {
height: 64px !important; /* or height of nav */
}