Question

我正在尝试更改纸质标题面板上的CSS。根据Polymers网站上的文档，我可以通过以下方式简单地改变阴影：

paper-header-panel {
  --paper-header-panel-shadow: {
      height: 6px;
      bottom: -6px;
      box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  };
}

很遗憾，我无法让它工作......我也试图改变纸质工具栏上的颜色，它也不起作用。

这是我的代码：

<!doctype html>
<html>
<head>
<!-- Polymer -->
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/paper-header-panel/paper-header-panel.html'>
<link rel='import' href='bower_components/paper-toolbar/paper-toolbar.html'>
<link rel='import' href='bower_components/paper-icon-button/paper-icon-button.html'>

<meta charset='utf-8'>
<title>Test</title>

<style>
paper-header-panel {
  --paper-header-panel-shadow: {
      height: 6px;
      bottom: -6px;
      box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);
  };
}
paper-toolbar {
  --paper-toolbar-background: green;
  --paper-toolbar-color: white;
}
</style>
</head>
<body class='fullbleed layout vertical'>
  <paper-header-panel class='flex'>
    <paper-toolbar>
      <div>Title</div>
    </paper-toolbar>
  </paper-header-panel>
</body>
</html>

出了什么问题？

Answer 1

我找到了原因。我必须将我的风格设为is='custom-style'。

<style is='custom-style'>
paper-header-panel {
  --paper-header-panel-shadow: {
      height: 6px;
      bottom: -6px;
      box-shadow: inset 0px 5px 6px -3px rgba(0, 255, 0, 0.4);
  };
}
paper-toolbar {
  --paper-toolbar-background: green;
  --paper-toolbar-color: white;
}
</style>

如何在Polymer中使用新的css功能？

1 个答案: