Изменить цвета подсветки и полоски в таблице «Материализация» с помощью помощника?

Question

Можно ли изменить цвет таблиц классов для Highlight, Striped в 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, чтобы перейти к нужному элементу.Затем вы можете запустить селектор: hover:

1. , открыв селекторы css,
2. нажав: hover
3. вот оно:)