使用 Materialize CSS (rails) 更改导航栏上的文本颜色答案

【问题标题】：Changing the text color on a nav bar using Materialize CSS (rails)使用 Materialize CSS (rails) 更改导航栏上的文本颜色
【发布时间】：2016-02-18 04:39:40
【问题描述】：

我想创建一个带有白色背景和黑色文本的导航栏，但无法将导航栏中链接中的文本变为白色。

我尝试过的事情：
- 将“black-text”类添加到 li 标签、ul 标签、周围的 div 和 nav 标签
- 在我的 application.scss 文件中为每个 li 标签定义一个类。
- 添加 li, nav, a { color: black; } 到我的 application.scss 文件

这是导航栏的 html：

  <header class="nav">
    <nav>
      <div class="nav-wrapper white">
        <a href="/" class="brand-logo black-text">GlobalPursuit</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><%= link_to "Pursuits", pursuits_path %></li>
          <li><%= join_dashboard_path %></li>
          <li><%= login_logout_path %></li>
          <li><%= trips_cart_display %></li>
        </ul>
      </div>
    </nav>
  </header>

【问题讨论】：

如果我们要帮助调试它，您需要向我们展示您的 CSS。 HTML 示例也将受益于真实链接 - SO 不处理 ERB 或 Rails 助手。

标签： html css materialize

【解决方案1】：

用rails试试这个，我为我工作，所以如果你修改样式。见整页。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
  
<style>    
nav ul li a{
  color: black;
}    
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper white black-text">
      <a href="#!" class="brand-logo">Logo</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 class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>

【讨论】：

这个不行了，运行代码sn -p，你会看到文字还是白色的。

【解决方案2】：

在品牌上试试这个以获得黑色文字：

<a href="#" class="brand-logo black-text">Logo</a>

【讨论】：

【解决方案3】：

由于向 html 添加样式更改会起作用，我建议留在您选择的 materializecss 框架内。

<div class="nav-wrapper"></div>

此导航栏背景颜色默认为粉红色，但只需添加一种内置颜色/阴影即可获得非常酷的效果。

<div class="nav-wrapper blue lighten-1></div>

现在我的导航栏有浅蓝色背景色。同样适用于文本。

<div class="card-panel">
      <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>

这将产生一个带有蓝色文本的卡片面板。希望这会有所帮助。

根据http://materializecss.com/color.html回答

【讨论】：

【解决方案4】：

看起来物化库在nav ul a 级别将颜色定义为白色：

nav ul a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 1rem;
    color: #fff;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}

要覆盖它，您必须将物化文本颜色类添加到导航 <ul> 中的实际 <a> 标记：

<nav>
    <div class="nav-wrapper white">
      <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 class="black-text" href="sass.html">Sass</a></li>
        <li><a class="black-text" href="badges.html">Components</a></li>
        <li><a class="black-text" href="collapsible.html">Javascript</a></li>
        <li><a class="black-text" href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

【讨论】：