聚合物，如何在纸上调整填充到内部div - 对话框 - 可滚动

Question

paper-dialog-scrollable的内容区域左右两侧有24px填充。我想改变这一点。渲染HTML时，它是一个内嵌样式表和一个具有填充的内嵌div。我尝试使用以下内容无济于事。聚合物内联样式采用我的内联样式。

不工作：

<style>
  .scrollable {
    --paper-dialog-scrollable: {
        padding-left: 0px;
        padding-right: 0px;
    };
  }
</style>

在下图中，我需要更改id =“scrollable”的div。我认为是scope = paper-dialog-scrollable-0实际上设置了填充。

那么如何在纸上对话框可滚动调整填充到内部div？

Answer 1

您可以使用::shadow和/deep/等选择器，但不推荐使用它们。如果一个元素没有提供钩子（CSS变量和mixins），那么你基本上没有运气，并且.scrollable没有这样的钩子。

您可以做的是在elements GitHub repo中创建功能请求，以通过mixin支持其他选择器。

我已成功使用的另一种解决方法是添加style module。

创建一个样式模块，如

<dom-module id="scrollable-customization">
 <style>
  .scrollable {
    --paper-dialog-scrollable: {
      padding-left: 0px;
      padding-right: 0px;
    };
  </style>
</dom-module>

导入它，然后将其“注入”可滚动元素

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'scrollable-customization');
Polymer.dom(this.$pdscroll.root).appendChild(myDomModule);

我希望语法正确。我只在Dart中使用Polymer。 dom-module需要是custom-style，即使这通常只在Polymer元素外部使用时才需要。

另见Styling Polymer paper-slider

Answer 2

我找到了另一种方法，只需使用元素样式，如下所示

var thisParents = $(this).parents('.list-group').not('.list-group-root');
$(".list-group").not(thisParents).collapse('hide');
$(".list-group").not(thisParents).find('.fa-chevron-down').addClass('fa-chevron-right').removeClass('fa-chevron-down');