Question

我的代码中有这个模板：

<template is="auto-binding" id="app">
<style>
    core-header-panel core-toolbar{
        height: 100px;
    }
    [drawer] div{
        padding: 20px;
        color: #fff;
    }
    [drawer] core-toolbar div{
        font-size: 24px;
    }
    [main] div{
        padding: 20px;
    }
    [main] core-toolbar {
        background: #A319A3;
        color: #fff;
        font-size: 24px;
    }
    .login_dialog {
        background: red
    }
</style>

<core-drawer-panel>

  <core-header-panel drawer>
    <core-toolbar>
      <div>Admin Managment</div>
    </core-toolbar>
    <div> 
        <core-menu selected="{{page}}" valueattr="data-category">

          <core-submenu data-category="Dashboard" label="Dashboard">

            <core-item label="Dashboard 1" horizontal="" center="" layout=""></core-item>
            <core-item label="Dashboard 2" horizontal="" center="" layout=""></core-item>
            <core-item label="Dashboard 3" horizontal="" center="" layout=""></core-item>

          </core-submenu>

          <core-submenu data-category="Topics" label="Topics" class="core-selected">

            <core-item label="Topic 1" horizontal="" center="" layout=""></core-item>
            <core-item label="Topic 2" horizontal="" center="" layout=""></core-item>

          </core-submenu>

          <core-submenu data-category="Favorites" label="Favorites">

            <core-item label="Favorite 1" horizontal="" center="" layout=""></core-item>
            <core-item label="Favorite 2" horizontal="" center="" layout=""></core-item>
            <core-item label="Favorite 3" horizontal="" center="" layout=""></core-item>

          </core-submenu>


        </core-menu>
    </div>
  </core-header-panel>

  <core-header-panel main>
    <core-toolbar>
      <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
      <div>{{page}}</div>
    </core-toolbar>
    <core-pages selected="{{page}}" valueattr="data-category">
      <section data-category="Dashboard">
        <div>
        Dashboard
        <paper-action-dialog class="login_dialog" transition="core-transition-bottom" opened backdrop="" autoclosedisabled="">
          <div>
            <h1>Admin Login</h1>
            <paper-input class="width100" floatingLabel label="Username"></paper-input>
            <paper-input class="width100" floatingLabel label="Password"></paper-input>
            <paper-button affirmative="" autofocus="" role="button" tabindex="0">Login</paper-button>
          </div>
        </paper-action-dialog>
        </div>
      </section><section data-category="Topics">
        <div>Topics</div>
      </section>
      <section data-category="Favorites">
        <div>Favorites</div>
      </section>
    </core-pages>
  </core-header-panel>

</core-drawer-panel>

设置此部分代码的最佳方式是什么：

       <paper-action-dialog class="login_dialog" transition="core-transition-bottom" opened backdrop="" autoclosedisabled="">
          <div>
            <h1>Admin Login</h1>
            <paper-input class="width100" floatingLabel label="Username"></paper-input>
            <paper-input class="width100" floatingLabel label="Password"></paper-input>
            <paper-button affirmative="" autofocus="" role="button" tabindex="0">Login</paper-button>
          </div>
        </paper-action-dialog>

我试图给它上课并改变它，但它似乎没有用。我也查了样式文档，但没有任何东西可供我使用。

Answer 1

您需要打阴影DOM以向下传播样式。像模板样式中的这个选择器应该可以工作：

:: host / deep / paper-action-dialog.login_dialog { ... }

在嵌套的Polymer元素中设置Polymer元素及其内容的样式

1 个答案: