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

Aravind 发表于 Dev

阿拉文

我正在尝试使用此处提到的“自定义CSS Mixins”为纸抽屉面板设置样式。paper-drawer-panel.css文件适用

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

分别用于抽屉和主容器。但是，使用mixins设置的样式似乎无法正常工作
。下面是我使用的Paper-Drawer-Panel演示的代码。

<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上的文档指出这也是有效的。

样式纸盒面板：

更改主容器：paper-drawer-panel {--paper-drawer-panel-main-container：{background-color：grey; }; }

要更改位于左侧的抽屉式容器，请执行以下操作：paper-drawer-panel {---paper-drawer-panel-left-drawer-container：{background-color：white; }; }

那么，在尝试使这个简单的东西起作用时，我在做错什么呢？

我还在测试Polymer 1.0的新样式架构。似乎您需要添加is="custom-style"到样式标签。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。