Несколько флажок с несколькими цветами в полимере 2

Question

У меня есть несколько флажков и хочу проверить его с несколькими цветами. Для этого у меня есть переопределение paper-checkbox но все элементы становятся более важными. Мои сценарии:

<custom-style>
  <style is="custom-style">
    paper-checkbox {
      --paper-checkbox-checked-color: #0F0;
    }
  </style>
</custom-style>

<div class="item-check">
    <paper-checkbox>Item 1</paper-checkbox>
    <paper-checkbox>Item 2</paper-checkbox>
</div>

Я хочу установить красный цвет для элемента 1 и зеленый для элемента 2. Что мне делать? Я новичок в полимере.

Answer 1

Для каждого другого элемента, чтобы иметь другой цвет, вы можете использовать:

<custom-style>
  <style is="custom-style">
    paper-checkbox:nth-of-type(2n+1) {
      --paper-checkbox-checked-color: #F00;
    }
    paper-checkbox:nth-of-type(2n+0) {
      --paper-checkbox-checked-color: #0F0;
    }
  </style>
</custom-style>

<div class="item-check">
    <paper-checkbox>Item 1</paper-checkbox>
    <paper-checkbox>Item 2</paper-checkbox>
</div>

Если вам нужен определенный цвет для определенного флажка, вы можете использовать классы и идентификаторы, как обычно.