无法使用自定义 CSS Mixins 在 Polymer 1.0 中设置纸抽屉面板的样式

Question

我正在尝试使用自定义 CSS Mixins 来设置纸抽屉面板的样式，如前所述 here。 paper-drawer-panel.css 文件适用

@apply(--paper-drawer-panel-left-drawer-container);
@apply(--paper-drawer-panel-main-container);

分别用于抽屉和主容器。但是，使用 mixins 设置的样式似乎不起作用
下面是我用过的paper-drawer-panel demo代码

<html>
      <head>
        <title>paper-drawer-panel demo</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

        <link rel="import" href="bower_components/paper-styles/paper-styles.html">
        <link rel="stylesheet" href="bower_components/paper-styles/demo.css">

        <link rel="import" href="bower_components/paper-button/paper-button.html">
        <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">

        <style>
        #drawerPanel {
        --paper-drawer-panel-left-drawer-container: {
          background-color: #eee;
        };
        --paper-drawer-panel-main-container: {
          background-color: gray;
        };
      }
        </style>
      </head>

      <body class="unresolved fullbleed">

        <paper-drawer-panel id="drawerPanel">
        <div drawer> 
            <div>Drawer content... </div>
        </div>
        <div main>
            <div>
              <paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
            </div>
          </div>
        </paper-drawer-panel>
      </body>
</html>

https://elements.polymer-project.org/elements/paper-drawer-panel 上的文档指出这也是有效的。

Styling paper-drawer-panel:

To change the main container: paper-drawer-panel { --paper-drawer-panel-main-container: { background-color: gray; }; }

To change the drawer container when it's in the left side: paper-drawer-panel { --paper-drawer-panel-left-drawer-container: { background-color: white; }; }

那么，我在尝试让这个简单的东西工作时做错了什么？

Answer 1

我也在测试 Polymer 1.0 的新样式模式。看来你需要在样式标签中添加is="custom-style"。

无法使用自定义 CSS Mixins 在 Polymer 1.0 中设置纸抽屉面板的样式

Unable to style paper-drawer-panel in Polymer 1.0 using Custom CSS Mixins

css

mixins

polymer