如何为导航栏关闭 Materialize 的默认阴影

Question

我只想关掉阴影。我可以通过浏览器检查并关闭所有框阴影类，但我不知道如何从 html/css 代码做到这一点。

代码：

<div class="navbar-fixed"> 
<nav class="navbar-transition cool-navbar ">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

将class设为

.no-shadows {
    box-shadow: none!important;
}

然后将其添加到要从中移除阴影的元素。

Answer 2

来自文档：z-depth-0 可用于从默认具有 z-depths 的元素中删除阴影。 https://materializecss.com/shadow.html

<nav class="navbar-transition cool-navbar z-depth-0">

如何为导航栏关闭 Materialize 的默认阴影

How to turn off materialize's default shadows for navbar

html

css

materialize