Question

我正在尝试使用提到的here中的Custom CSS Mixins来设置纸质抽屉面板的样式。 paper-drawer-panel.css文件适用

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

分别用于抽屉和主容器。但是，使用mixins设置的样式似乎不起作用以下是我用过的纸质抽屉面板演示代码。

<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：{   背景颜色：白色; }; }

那么，在尝试让这个简单的事情发挥作用时我做错了什么？

Answer 1

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

无法使用Custom CSS Mixins

1 个答案: