如何覆盖默认的 Polymer CSS

Question

现在 core-toolbar 有一个 indent class 将标题向右缩进 60px，而 material 设计规定边距应该实际上是 80px（事实上，数字 60 从未在整个文档中显示）。

所以我可以轻松地在 bower_components/core-toolbar/core-toolbar.css 中编辑它，但问题是，一旦我将项目移动到其他地方，我必须在完成我的凉亭安装后进行相同的编辑等..

请注意，如果我要扩展 core-toolbar 说，我会遇到 core-header-panel 等问题。因为它会寻找 <core-toolbar> 或其他东西class "core-header" 这有点烦人，但我可以忍受。

做这样的事情最好的方法是什么？

Answer 1

一种方法可能是使用类似 http://jsbin.com/soveyo/12/edit 的方式全局覆盖核心工具栏的样式请注意，我在那里只有原生阴影 dom 支持。

或者如果您愿意并删除 html /deep/ 位，您可以在特定情况下执行此操作。

或者您可以将自己的 class 添加到作为内容提供给工具栏的元素，并为其添加所需的缩进。

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>

或者更好的是，您可以扩展核心工具栏以保留核心工具栏处理的所有属性

如何覆盖默认的 Polymer CSS

How to override default Polymer CSS

css

web-component

shadow-dom

polymer