Question

我想从Materialize动态更改导航栏的背景颜色，因此需要通过CSS完成。我试着做了

.nav-wrapper{
 background-color: <MYCOLOR HERE> !important;
}

但它只是保持与导航栏类中提到的相同颜色。

Answer 1

因为在Materialise中你必须更改nav的背景颜色，例如你想要白色导航栏：

.nav {
  background-color: #ffffff !important;
}

另一种解决方案，即添加<nav>的课程white：

<nav class="white">

它也会改变导航栏的背景颜色。

如果您正在使用sass或scss，则还有一个解决方案：

nav {
  @extend .white;
}

希望，它可以帮到你！

Answer 2

对于 nav-wrapper 类，请使用：

.nav-wrapper {
    background-color: #850000 !important;
    font-size: 14px;
    font-weight: bold;
  }

Answer 3

将颜色名称和明暗度作为类添加到元素。在Color-Matrialize上查看详细信息。

Answer 4

使用Jquery动态更改导航栏的颜色

  $(".nav-wrapper").css("background-color", themeColor);

这是我的代码片段

 </body>

<script>

// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("themeColor", "blue");
    // Retrieve
    $("#themeColor").innerHTML = localStorage.getItem("themeColor");
} else {
    $("#themeColor").innerHTML = "Sorry, your browser does not support Web Storage...";
}

      $(".nav-wrapper").css("background-color", 'purple');
      $(".secondary-content>.material-icons").css("color", 'purple');
      $(".btn").css("background-color", 'purple');
      $(".page-footer").css("background-color", 'purple');
      $(".input-field").css("color", 'purple');
      $(".input-field>.material-icons").css("color", 'purple');
      $(".input-field>label").css("color", 'purple');

function getRandomColor() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
       color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

$(document).ready(function(){

    $("button").click(function(){
      var themeColor = getRandomColor();
      $(".nav-wrapper").css("background-color", themeColor);
      $(".secondary-content>.material-icons").css("color", themeColor);
      $(".btn").css("background-color", themeColor);
      $(".page-footer").css("background-color", themeColor);
      $(".input-field").css("color", themeColor);
      $(".input-field>.material-icons").css("color", themeColor);
      $(".input-field>label").css("color", themeColor);
      $(".btn-floating").css("background-color", themeColor);

    });
});
</script>
</html>

查看此处的现场演示

在Materialize CSS Change Theme Color上查看Hitesh Sahu（@hiteshsahu）的笔CodePen。

更改MaterialiseCSS中的导航栏颜色

4 个答案: