小编Him*_*ndu的帖子

如何在 mwc 文本字段中为高度添加 mixin?

我正在使用聚合物 3 和 lit-element(2.2.1)。mwc-textfield 的版本是 0.13.0。我已经阅读了与此版本相关的文档。在此文档中,我发现我们可以为高度添加 mixin。我尝试了几种方法,但没有成功。可能是我使用的语法错误。我想降低文本字段的高度。这是我的文本字段

<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
Run Code Online (Sandbox Code Playgroud)

和我的 css

 #textBox{
  text-transform: none;
   --mdc-theme-primary: transparent;
   --mdc-text-field-fill-color: #fff;
   --mdc-text-field-hover-line-color: #f5f5f5;
   --mwc-text-width: 100%;
   width:100%;
 }
Run Code Online (Sandbox Code Playgroud)

应用的默认 css 是

:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
    background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
    background-color: rgb(245, 245, 245);
}
.mdc-text-field {
    display: flex;
    width: 100%;
}
.mdc-text-field {
    height: 56px;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    will-change: opacity, transform, color;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
}
.mdc-text-field {
    --mdc-ripple-fg-size:  0; …
Run Code Online (Sandbox Code Playgroud)

html web-component polymer-3.x lit-element lit-html

8
推荐指数
1
解决办法
1204
查看次数

标签 统计

html ×1

lit-element ×1

lit-html ×1

polymer-3.x ×1

web-component ×1