Question

我想更改Polymer component paper-dropdown-menu的css。我想改变内部元素的宽度 - 下拉阴影dom中的铁下拉（或纸张列表框）。

我应该制作新的自定义元素以及如何更改此元素的CSS吗？我试过这个：

{{1}}

Answer 1

您是否尝试使用按钮触发this等下拉菜单？然后你可以使用＆＃39; paper-menu-button＆＃39;元件。如果您只想使用纸张下拉菜单，那么

您可以使用任何纸张输入容器和纸张菜单按钮样式mixins和自定义属性来设置内部输入和样式菜单按钮。

改变宽度：

int a = 10;

/*or*/
double t;
t = 0.5;

Answer 2

要设置paper-listbox的宽度，请将选择器更改为paper-listbox：

paper-listbox {
  width: 500px;
}

将paper-listbox和paper-dropdown-menu的宽度设置为相同：

paper-dropdown-menu,
paper-listbox {
  width: 500px;
}

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-dropdown-menu,
        paper-listbox {
          width: 500px;
        }
      </style>
      <paper-dropdown-menu label="Your favourite pastry">
        <paper-listbox class="dropdown-content">
            <paper-item>Croissant</paper-item>
            <paper-item>Donut</paper-item>
            <paper-item>Financier</paper-item>
            <paper-item>Madeleine</paper-item>
        </paper-listbox>
    </paper-dropdown-menu>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({ is: 'x-foo' });
      });
    </script>
  </dom-module>
</body>

codepen

如何覆盖聚合物组件样式css

2 个答案: