css - 如何覆盖 polymer 组件样式的CSS

Question

我想更改 Polymer 组件 paper-dropdown-menu 的 css。我想更改内部元素的宽度 - 下拉列表的影子 dom 中的 iron-dropdown(或 paper-listbox)。

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

<dom-module id="my-button">
     <style is="custom-style">
        paper-dropdown-menu {
            --paper-dropdown-menu-ripple: {
                width: 500px;
            }
        }
    </style>
    <template>
        <content></content>
    </template>
    <script>
        Polymer({
            is: 'my-button'
        })
    </script>
</dom-module>
<my-button>
    <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>
</my-button>

Answer 1

您是否正在尝试使用按钮来触发下拉菜单，例如 this ？然后你可以使用'paper-menu-button'元素。如果你只想使用 paper-dropdown-menu 那么

You can use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.

改变宽度:

paper-dropdown-menu{
  -paper-input-container: {
     width: 100px;
  }
}