如何覆蓋默認的Polymer CSS

Question

現在core-toolbar有一個indent類，它將右邊的標題縮進60px ，而材料設計規定邊距實際上應該是80px （事實上​​，數字60在整個文檔中從未顯示過）。

所以我可以輕松地在bower_components/core-toolbar/core-toolbar.css編輯它，但問題是，一旦我將項目移動到其他地方，我必須在完成我的涼亭后進行相同的編輯安裝等..

請注意，如果我要擴展core-toolbar ，我會遇到core-header-panel等問題。因為它會尋找<core-toolbar>或類似"core-header"這有點令人煩惱，但這是我可以忍受的東西。

做這樣的事情最好的方法是什么？

Answer 1

一種方法可能是使用像http://jsbin.com/soveyo/12/edit這樣的全局覆蓋核心工具欄的樣式。請注意，我只有原生影子dom支持。

或者你可以在特定的實例中這樣做，如果你喜歡和刪除html / deep / bit。

或者，您可以將自己的類添加到您作為工具欄內容的元素中，並為其提供所需的縮進。

Answer 2

你也可以嘗試創建自己的工具欄元素一個noscript聚合物元素，只有你的css樣式和核心工具欄。 就像是 ：

<polymer-element name="my-toolbar" noscript>
<template>
  <style>
    core-toolbar { /* xxxx */ }
  </style>
  <core-toolbar><content></content></core-toolbar>
</template>
</polymer-element>

或者甚至更好，您可以擴展核心工具欄以保持核心工具欄中的所有屬性處理