Question

当点击工具栏的按钮时，我可以看到在将菜单呈现为绿色之前显示的白色背景。请参阅demo。

感谢有人可以让我知道我做错了什么，因为我是Polymer的新手。

更新：包括基于输入的演示代码（删除不相关的代码）和Dirk提供的解决方案。下面的代码将显示具有适当背景颜色的菜单。在动画渲染期间（在这种情况下为绿色）。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">

    <script rel="import" src="http://www.polymer-project.org/components/platform/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">

    <link rel="import" href="http://www.polymer-project.org/components/paper-item/paper-item.html">
    <link rel="import" href="http://www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
</head>
<body unresolved fullbleed layout>
    <my-app></my-app>
    <polymer-element name="my-app" noscript>
        <template>
            <style>
                :host {
                    display: block;
                    height: 100%;
                    background-color: #0000ff;
                }

                paper-item {
                    font-size: 0.5em;
                    color: white;
                    /* --- remove this */
                    /*background-color: green;*/
                }

                /* --- add this */
                paper-menu-button /deep/ .paper-menu-button-overlay-bg {
                    background: green;
                }
            </style>
                <paper-menu-button icon="menu">
                    <paper-item icon="settings" label="Settings"></paper-item>
                    <paper-item icon="add" label="Add"></paper-item>
                    <paper-item icon="search" label="Search"></paper-item>
                </paper-menu-button>
        </template>
    </polymer-element>
</body>
</html>

Answer 1

请在您的问题中添加代码的相关部分，以备将来参考。如果一切都在一个地方并且将来可以删除JS Bin，则更容易概述问题。

然后从background: green部分删除paper-item条目。这是不需要的，因为我们在其他地方设置了弹出菜单的背景颜色（这个样式的另一个问题是，它从弹出菜单中删除圆角。这可能是也可能不是故意的。）

最终添加

paper-menu-button /deep/ .paper-menu-button-overlay-bg {
  background: green;
}

你的风格，现在一切看起来都更好。此部分设置纸张菜单按钮弹出窗口的背景，即 overlay 。

这是正确的方法吗？我不知道。因为现在你依赖于CSS中 paper-menu-button 的内部。我认为将来所有核心和 paper 元素都需要（在某种程度上）是完全可主题化的，这意味着您可以为所有组件指定大多数核心颜色和样式。单身。

在渲染纸菜单按钮项目之前显示的白色背景

1 个答案: