html - 如何在MWC文本字段中为高度添加mixin？

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

<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>

和我的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%;
 }

应用的默认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;
    --mdc-ripple-left:  0;
    --mdc-ripple-top:  0;
    --mdc-ripple-fg-scale:  1;
    --mdc-ripple-fg-translate-end:  0;
    --mdc-ripple-fg-translate-start:  0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
label {
    cursor: default;
}
<style>
#textfield {
    width: var(--text-field-width,80%);
    height: 100%;
    position: absolute;
    left: 0;
    top: -12px;
    text-transform: capitalize;
    --mwc-text-width: 100%;
}
<style>
mwc-textfield {
    --mdc-theme-primary: transparent;
    --mdc-text-field-ink-color: black;
    --mdc-text-field-fill-color: transparent;
    --mdc-text-field-disabled-fill-color: transparent;
}

应用于文本字段的默认高度为56像素。我试过的是

 #textbox.mdc-text-field--height{
    height:45px;
    }

和

#textbox.mdc-text-field--height('45px');

并且还在节点模块文件中添加了mixin作为 height:var(-mdc-text-field-height，56px);
并在CSS中用作

#textBox{
--mdc-text-field-height:45px;
}

任何帮助将不胜感激!提前致谢。

最佳答案

Material 设计组件vs Material Web组件



这里首先要注意的是，有两个不同的 Material 组件库:您所指的是MDC( Material 设计组件，在npm上以@material/<component>形式分发)，它是 Material 组件的SASS + JS实现。另一个是MWC( Material Web组件，以@material/mwc-<component>分发)，它是基于前一个库的实际WebComponents的集合。因此请记住，文档引用了您实际使用的MWC组件的MDC副本(<mwc-textfield>)。

外部样式

您要在这里做什么

#textbox.mdc-text-field--height {
  height: 45px;
}

主要由于无法在自定义元素的阴影根内部进行选择(至少是not anymore)而无法工作；同样，负责高度的元素是<label>，其类是.mdc-text-field。

查询选择器方式

改变我想到的高度的最快方法是:

import { LitElement, html, property, customElement, css, query } from 'lit-element';
import '@material/mwc-textfield';

@customElement('my-component')
export class MyComponent extends LitElement {
  // Select the text field
  @query('mwc-textfield') textField;

  async firstUpdated() {
    // Wait for its dom to be ready
    await this.field.updateComplete;
    // Programmatically select the label
    // and change the height
    this.field
    .shadowRoot
    .querySelector('.mdc-text-field')
    .style
    .height = '45px';
  }

  render() {
    return html`<mwc-textfield></mwc-textfield>`;
  }
}

但是我真的不建议这样做:除了性能和优雅之外，它可能会破坏mwc-textfield的某些功能，例如 float 标签。

扩展方式

您还可以通过扩展TextField并覆盖样式来增强高度:

import {LitElement, html, customElement, css} from 'lit-element';
import {TextField} from '@material/mwc-textfield/mwc-textfield';

@customElement('my-textfield')
export class MyTextfield extends TextField {
  static styles = [TextField.styles, css`
    .mdc-text-field {
      height: 45px;
    }
  `];
}

// Then use <my-textfield> instead of <mwc-textfield>

但还是要像上述一样，使用时需您自担风险...

使用mixin

我想目前使用height mixin的唯一方法是构建自定义版本的TextField，或多或少是这样的:

复制mwc repo(是的，这是一个monorepo，因此您也可以获得所有其他组件，但是我敢肯定您可以删除所有未通过mwc-textfield导入的组件)

npm安装

packages/mwc-textfield/src/mwc-textfield.scss中的

使用mixin:

@include mixins.height(45px);

大概在here

附近

npm运行构建

复制mwc-textfield文件夹并将其粘贴到您的项目中(删除源文件，npm pack可能很方便)，然后将导入从@material/mwc-textfield更改为./path/to/custom-textfield

当然，要更改高度需要做很多工作……好消息是MWC仍在开发中，不能排除他们将添加CSS自定义属性或其他自定义高度的方法。另外，新的density概念正在MWC中实现(可能尚未在TextField中实现)，这可能正是您所需要的。

关于此还有一个开放的issue，让我们看看他们怎么说