有没有办法使用 Materialize.css 只指定一次背景颜色？答案

【问题标题】：Is there a way to specify the background color only once using Materialize.css?有没有办法使用 Materialize.css 只指定一次背景颜色？
【发布时间】：2021-01-05 08:40:23
【问题描述】：

我将以下 HTML 与 Materialize 一起使用，试图使包含某些内容的卡片具有深色背景：

<!-- 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>
            

<div class="card grey darken-4 white-text">
  <h6>Title</h6>
  <ul class="collection">
    <li class="collection-item">
      Item 1
    </li>
    <li class="collection-item">
      Item 2
    </li>
    <li class="collection-item">
      Item 3
    </li>
  </ul>
</div>

但是，结果如下所示：

如您所见，文本不可读，因为文本颜色由<ul> 项目继承，但背景颜色不是。我不确定我做错了什么，或者这是 Materialize 的限制。

我可以让它工作的唯一方法是明确指定每个子元素的背景颜色，如下所示：

<!-- 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>


 <div class="card grey darken-4 white-text">
  <h6>Title</h6>
  <ul class="collection grey darken-4">
    <li class="collection-item grey darken-4">
      Item 1
    </li>
    <li class="collection-item grey darken-4">
      Item 2
    </li>
    <li class="collection-item grey darken-4">
      Item 3
    </li>
  </ul>
</div>

这可以正确渲染，但它很难看，并且不能很好地与我们的模板系统配合使用。有没有办法只指定一次背景颜色？

【问题讨论】：

这是因为 collection 中的类 collection-item 例如 .collection .collection-item 正在应用 background-color: white。只是检查。这是正常的方式。您始终可以指定自己的 CSS
我投票结束这个问题，因为它不是错误，只是框架的正常行为
为什么要关闭不是错误的问题？
您将其呈现为好像这是一个框架问题。但这是非常基本的 CSS 问题......如何将 CSS 应用于孩子？真的不需要得到比你得到的答案更多的东西。最好的问候
你原来的标题是：“为什么我的 Materialize.css 背景颜色没有级联？”，正如我在第一条评论中所说，这是非常正常的行为。

标签： html css materialize

【解决方案1】：

来自 materialize.css 的实际类是：

.collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

您可以通过检查元素来检查这一点。有很多解决方法可以修改您的要求。您可以像这样使用内置的实用颜色类：

.collection .collection-item {
    background-color: inherit;
}

然后：

<ul class="collection grey darken-4">
    <li class="collection-item">
      Item 1
    </li>
    <li class="collection-item">
      Item 2
    </li>
    <li class="collection-item">
      Item 3
    </li>
</ul>

在 ul 上声明一次 bg 颜色，然后全局所有集合 li 也将采用此 bg 颜色。

【讨论】：

【解决方案2】：

为什么不直接使用 CSS 并设置 .collection-item 类的样式？

<!-- 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>
    
<style>
.card > ul > .collection-item {
  background-color: #212121 !important;
}
</style>    

<div class="card grey darken-4 white-text">
  <h6>Title</h6>
  <ul class="collection">
    <li class="collection-item">
      Item 1
    </li>
    <li class="collection-item">
      Item 2
    </li>
    <li class="collection-item">
      Item 3
    </li>
  </ul>
</div>

【讨论】：

这样做很危险，因为这意味着它会改变整个网站上的所有行为类，可能这不是最好的......但你可以通过在@987654323 中添加一个 id 来精确它@ 然后从那里指定 CSS
@MaxiGui 我已经更新了我的答案。您可以使用类似 .card > ul > .collection-item 的方式专门调用它