如何设计 dart-polymer material-design 应用程序的样式

Question

我正在尝试将一个主题应用到我的 dart-polymer material-design 应用程序中，我到处看视频和教程，建议用几行 CSS 你可以改变整个应用程序的外观。

我什至刚刚使用 http://www.materialpalette.com/grey/red 生成了一个主题，它给了我以下内容 CSS:

/* Palette generated by Material Palette - materialpalette.com/grey/red */
.dark-primary-color    { background: #616161; }
.default-primary-color { background: #9E9E9E; }
.light-primary-color   { background: #F5F5F5; }
.text-primary-color    { color: #212121; }
.accent-color          { background: #FF5252; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #727272; }
.divider-color         { border-color: #B6B6B6; }

...我已将其包含在我的默认样式表中，但没有颜色变化。

如果这是我的自定义聚合物元素：

<polymer-element name="main-app" class="default">
  <template>
    <style type="text/css">
      :host {
        display: block;
      }

    </style>

    <core-toolbar class="default">
        <paper-icon-button icon="menu"></paper-icon-button>
        <span flex class="default">
          <paper-tabs selected="0">
            <paper-tab>ITEM ONE</paper-tab>
            <paper-tab>ITEM TWO</paper-tab>
            <paper-tab>ITEM THREE</paper-tab>
          </paper-tabs>
        </span>
        <paper-icon-button icon="refresh"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
    </core-toolbar>


</template>
  <script type="application/dart" src="main-app.dart"></script>
</polymer-element>

这是我的 index.html 使用自定义主应用程序组件：

<!DOCTYPE html>
<head>

  ...

  <link rel="import" href="packages/falm/main-app.html">
  <link rel="stylesheet" href="styles.css">


</head>
<body unresolved>
  <main-app class="default"></main-app>
  <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>

...生成主题的正确使用方法是什么？我是否应该在所有地方手动添加那些 css 类？

Answer 1

是的，您需要在某处添加类。

您可以使用 core-style element 重复使用样式，或者您可以将样式添加到主页 (index.html) 并在它们前面加上 * /deep/ 前缀（例如 `* /deep/ .dark-primary-color) 但仍然需要将类应用于元素。

关于造型聚合物元素的一些资源

如何设计 dart-polymer material-design 应用程序的样式

How to style a dart-polymer material-design application

css

polymer

dart-polymer