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

Question

我将以下 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> 项目继承，但背景颜色不是。我不确定是我做错了什么，还是这是 Materialise 的限制。

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

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

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

Answer 1

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

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

Answer 2

实际class，从materialize.css是：

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

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

.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 颜色。

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

Is there a way to specify the background color only once using Materialize.css?

html

css

materialize