Как изменить цвет фона на бумажной панели Polymer (1.0)?

Question

Вчера я решил попробовать Polymer 1.0, и я уже сталкиваюсь с трудностями при попытке стилизации панели инструментов.

В документации сказано, что цвет фона может быть изменен с помощью: --paper-панель инструментов-фон

Но как я могу использовать его на CSS?

Я попытался следующие:

paper-toolbar { 
     --paper-toolbar-background: #e5e5e5; 
    } 

Кроме этого:

paper-toolbar { 
     --paper-toolbar { 
      background: #e5e5e5; 
     } 
    } 

Но ни работал. Каков правильный способ сделать это?

Спасибо.

Answer 1

Если вы разрабатываете его на своей главной странице, вам необходимо применить стили, используя <style is='custom-style'>. Это делается для создания пользовательских свойств CSS.

Применение относительно просто. paper-toolbar предоставляет 2 пользовательских свойства и один микшинг. --paper-toolbar-background - свойство, которое меняет цвет фона на панели инструментов, а --paper-toolbar-color меняет цвет переднего плана. --paper-toolbar - это микширование, применяемое к панели инструментов.

Использовать эти свойства так же, как применять стили в ваших элементах. В качестве примера

<style is="custom-style"> 
    paper-toolbar { 
    --paper-toolbar-background: #00f; /* changes the background to blue*/ 
    --paper-toolbar-color: #0f0; /* changes the foreground color to green */ 
    --paper-toolbar: { 
     font-size: 40px; /* Change default font size */ 
    }; /* Notice the semicolon here */ 
    } 
</style> 

Answer 2

Я не мог найти решение этой проблемы до недавнего времени. У меня есть две панели инструментов, и я не хотел менять CSS для всех панелей инструментов только на панели инструментов заголовка.

Чтобы изменить CSS для каждой панели инструментов, во внешнем файле CSS добавить следующее:

paper-toolbar.paper-toolbar-0 { 
    background: orange; 
    color: red; 
} 

Однако это не решает проблему. Для того, чтобы изменить один тулбар бумаги на основе класса, как в следующем:

<paper-toolbar class="header"> 
    ... 
</paper-toolbar> 

выше использует класс, называемый «заголовок», так в моем CSS я добавил:

paper-toolbar.header { 
    background: orange; 
    color: red; 
} 

... и она работала ! Ура! Это означает, что с этим вы должны уметь переопределять любой CSS любого из других элементов, делающих то же самое. Это полностью непроверено, но я думаю, что он должен работать следующим образом:

<elementName>.<classname> { 
    ... 
} 

Надеюсь, это все поможет!