如何覆盖默认的 Polymer CSS答案

【问题标题】：How to override default Polymer CSS如何覆盖默认的 Polymer CSS
【发布时间】：2015-03-20 08:05:07
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css polymer web-component shadow-dom

【解决方案1】：

一种方法可能是使用 http://jsbin.com/soveyo/12/edit 之类的东西全局覆盖 core-toolbar 的样式。请注意，我那里只有原生 shadow dom 支持。

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

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

【讨论】：

【解决方案2】：

您也可以尝试创建自己的工具栏元素一个 noscript 聚合物元素，只有你的 css 样式和一个核心工具栏。类似的东西：

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

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

【讨论】：

这种方法的问题是它不适用于利用 core-toolbar 的元素，例如 core-header-panel。