Как переопределить 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. Обратите внимание, что у меня есть только поддержка теневого домика.

Или вы можете сделать это в конкретном случае, если хотите, чтобы & удалил 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> 

Или еще лучше, вы можете расширить базовую-панель инструментов, чтобы сохранить все атрибуты обработки из ядра-панели