Question

我在这里疯了。我以为我有一个聚合物造型的处理，但是唉。

我有：

<my-app>
  <sign-in>
    <core-overlay>

在sign_in.css中我设定了风格：

core-overlay {
  background: red;
}

但它不起作用！

我的sign_in.html是：

<link rel="import" href="../../../../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../../../../packages/core_elements/core_overlay.html">
<polymer-element name="sign-in">
  <template>
    <link rel="stylesheet" href="sign_in.css">
    <core-overlay id="overlay" class="overlay" layered backdrop opened="false" transition="core-transition-center">
      <span id="message">Please sign in to comment.</span>
      <button class="signin-btn" id="facebook-signin" on-click="{{signInWithFacebook}}">Sign in with Facebook</button>
    </core-overlay>
  </template>
  <script type="application/dart" src="sign_in.dart"></script>
</polymer-element>

Answer 1

背景和核心覆盖元素是<body>的子动态动态创建的。要设置样式，请将以下css添加到输入页面CSS

背景

<style>
  body div.core-overlay-backdrop {
    background: red;
  }
</style>

覆盖

  * /deep/ core-overlay {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     -webkit-user-select: none;
     -moz-user-select: none;
     overflow: hidden;
     background: green;
     padding:30px 42px;
     outline: 1px solid rgba(0,0,0,0.2);
     box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }

叠加css是从https://github.com/Polymer/core-overlay/blob/master/demo.html#L38-L49复制的。
核心覆盖演示使用自定义Polymer元素x-dialog来封装核心覆盖和CSS。

如何设置核心叠加层的样式？

1 个答案:

背景

覆盖