更新 Style/Remove 属性

Question

我需要删除 div

的样式属性

第 85 行 https://github.com/PolymerElements/app-layout/blob/master/app-toolbar/app-toolbar.html

::content > [condensed-title] {
        pointer-events: none;
        @apply(--layout-flex)*;
      }

*（我不想在我制作的特定头部组件中将 flexbox 应用于 [condensed-title]）

第 133 行https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html

    --layout-flex: {
  -ms-flex: 1 1 0.000000001px;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0.000000001px;
  flex-basis: 0.000000001px;
};

我的代码

<app-toolbar>
        <div class="logo-title">
          <iron-icon icon="custom-icons:casinha"></iron-icon>
        </div>
        <div id="outAlert" condensed-title>
          <paper-icon-button icon="card-membership"></paper-icon-button>
        </div>
        <div class="sublogo-title">
          <h4>Sublogo</h4>
        </div>
      </app-toolbar>

Answer 1

您可以通过 3 种三种方式实现此目标

您可以在元素中设置样式 #outAlert 并设置 flex: 0。这将覆盖应用布局的样式。
```
#outerAlert {
    flex: 0;
}
```

使用内联样式覆盖flex并设置为0

 <div id="outAlert" condensed-title style="flex:0">

最后，在您不希望 flex 存在的地方覆盖 --layout-flex 混入 app-layout。

app-layout {
   --layout-flex: {
      flex: 0; /* You can have any other value also. Not sure if empty mixin will work or not */
   };
}

Answer 2

我使用以下代码解决了问题：

      #outAlert{
        @apply(--layout-flex-none);
      }

更新 Style/Remove 属性

Update Style/Remove Attribute

polymer

polymer-1.0