从 paper-dialog - polymer 中的 app-toolbar 移除顶部填充

Question

对于我来说，当我在顶部有一个应用程序工具栏时，我似乎无法从这个 paper-dialog 的顶部删除愚蠢的边距。

我设法通过使用 margin-top: 0px; 仅使用标准 div 对其进行了排序，但我无法对 app-toolbar.

执行相同的操作

Chrome 开发者模式中的罪魁祸首似乎是这一行，但我无法理解...

代码

paper-dialog {
  border-radius: 2px;
}

app-toolbar {
  background: green;
  margin-top: 0px;
}

.card-content {
  margin-top: 0px;
}

<base href="https://polygit.org/polymer+polymer+v1.9.1/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-dialog/paper-dialog.html" />
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html" />
<link rel="import" href="paper-input/paper-input.html" />
<link rel="import" href="neon-animation/animations/scale-up-animation.html" />

<paper-dialog modal alwaysOnTop opened horizontalAlign="auto" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  <app-toolbar>Log in</app-toolbar>
  <div class="card-content">
    <paper-input placeholder="username or email"></paper-input>
    <paper-input placeholder="password"></paper-input>
  </div>
</paper-dialog>

Answer 1

让您的 CSS 胜过继承的 CSS 的诀窍是比继承的 CSS 更具体。

为此，我在 paper-dialog 中添加了一个 class，然后对于选择器，我说了 paper-dialog.someclass>app-toolbar:first-child，这意味着 paper-dialog 中应用程序工具栏的第一个实例 [=29] =]一些class.

然后接受这个 CSS 覆盖继承的位。

paper-dialog {
  border-radius: 2px;
}

paper-dialog.someclass>app-toolbar:first-child {
  background: green;
  margin-top: 0px;
}

.card-content {
  margin-top: 0px;
}

<base href="https://polygit.org/polymer+polymer+v1.9.1/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-dialog/paper-dialog.html" />
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html" />
<link rel="import" href="paper-input/paper-input.html" />
<link rel="import" href="neon-animation/animations/scale-up-animation.html" />

<paper-dialog class="someclass" modal alwaysOnTop opened horizontalAlign="auto" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  <app-toolbar>Log in</app-toolbar>
  <div class="card-content">
    <paper-input placeholder="username or email"></paper-input>
    <paper-input placeholder="password"></paper-input>
  </div>
</paper-dialog>

Answer 2

尝试添加：

padding-top: 0px;
margin-top: 0px;

您的 css 纸质对话或 div 包含纸质对话！

从 paper-dialog - polymer 中的 app-toolbar 移除顶部填充

remove top padding from app-toolbar within paper-dialog - polymer

html

css

polymer

paper-dialog