更改 <core-drawer-panel> 默认宽度时遇到问题答案

【问题标题】：Having trouble with changing <core-drawer-panel> default width更改 <core-drawer-panel> 默认宽度时遇到问题
【发布时间】：2014-11-24 20:08:06
【问题描述】：

我几天前开始玩 Polymer，到目前为止我理解得很好，但刚才我遇到了一个问题。我尝试更改默认宽度，但无法获得所需的结果。首先，我尝试仅通过以下更改更改 CSS 中的宽度：

  #navheader {
      background-color: #56BA89;
  }
  core-drawer-panel .transition > #main{
      left:100px!important;
  }

  core-drawer-panel .transition > #drawer{
      width:100px!important;
  }

  core-drawer-panel .narrow-layout > #drawer:not(.core-selected){
      width:100px!important;
  }

这里是html部分：

<core-scaffold>

  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One"></core-item>
      <core-item label="Two"></core-item>
      <core-item label="Three"></core-item>
      <core-item label="Four"></core-item>
      <core-item label="Five"></core-item>
      <core-item label="Six"></core-item>
      <core-item label="Seven"></core-item>

    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>
</core-scaffold>

它不想在没有 !important 的情况下覆盖默认样式。这就是我得到的：http://screencast.com/t/7AQHblQvk，它看起来不错，直到它崩溃，就像这样：http://screencast.com/t/oDg3ptLpp。然后我尝试更改 core-drawer-panel.html 内部的默认宽度，所以我修改了这部分代码：

/**
 * Width of the drawer panel.
 *
 * @attribute drawerWidth
 * @type string
 * @default '256px'
 */
 drawerWidth: '100px',

什么也没发生。它没有改变元素的宽度，所以现在我对如何实现这一点没有想法和知识。有人可以帮忙吗？

提前致谢！ :)

【问题讨论】：

标签： html css polymer web-component

【解决方案1】：

有一个drawerWidth 属性可以改变宽度：

<core-drawer-panel drawerWidth="100px">

https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel

【讨论】：

如果使用 core-scaffold，添加它，因为有一个隐含的 :

【解决方案2】：

除了聚合物开发指南中ebidel 的回答：

带有破折号的属性名称通过将每个破折号后面的字符大写，然后删除破折号，转换为驼峰式属性名称。例如，属性 first-name 映射到 firstName。

如果上面的答案不起作用，试试这个：

<core-drawer-panel drawer-width="100px">

【讨论】：