使用助手更改Materialize中表格中的突出显示和条纹颜色？

Question

是否可以使用帮助器更改Highlight，Striped in Materialize的表类的颜色，就像使用其他背景和文本颜色一样？

例如，在我可以做的元素类中

class="black yellow-text"，这就是我所看到的，但是如果我将表格改为白色文字，则突出显示的颜色使其无法读取。

我动态地改变颜色，所以如果可能的话，通过元素类中的助手来做这件事会很好。

如果没有，那么我可以覆盖元素上样式标签的默认值吗？

谢谢，

Answer 1

在发布问题时你的代码片段是首选的（最好的，因为你说“这就是我看到的”）...顺便说一句...要在用鼠标悬停时覆盖默认颜色，你可以输入以下css：

table.highlight>tbody>tr:hover {
    background-color: rgba(194, 206, 23, 0.5);      /* whatever color you want */
}
table.highlight>tbody>tr {
    color: red;                                     /* whatever color you want */
}

如果你将CSS放在一个单独的文件中，请确保使用!important关键字，否则它将不会生效，因为materialecss'css将优先于我们的。像这样：

table.highlight>tbody>tr:hover {
    background-color: rgba(194, 206, 23, 0.5) !important;
}
table.highlight>tbody>tr {
    color: red !important; <!-- you could ignore the !important here since materialize doesn't give a default color -->
}

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
    <table class="highlight">
        <thead>
          <tr>
              <th>Name</th>
              <th>Item Name</th>
              <th>Item Price</th>
          </tr>
        </thead>
    
        <tbody>
          <tr>
            <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
          </tr>
          <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
          </tr>
        </tbody>
    </table>
</div>

也许你已经知道了所有这些，也许不是......但是下次如果你想看看元素在盘旋时的行为是什么，你可以通过点击上下文菜单中的inspect来直接使用元素来使用开发者控制台你需要。然后，您可以通过以下方式触发：悬停选择器：

1. 打开css选择器，
2. 点击：悬停
3. 这里是 ：）