Ara*_*ind 4 css mixins polymer
我正在尝试使用此处提到的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-main-container:{background-color:grey; }; }
要在左侧更换抽屉容器:纸抽屉面板{ - paper-drawer-panel-left-drawer-container:{background-color:white; }; }
那么,在尝试让这个简单的事情发挥作用时,我做错了什么？