¿Cómo agregar mixin para altura en mwc textfield?

Estoy usando el polímero 3 y el elemento iluminado (2.2.1). La versión de mwc-textfield es 0.13.0. He leído las documentaciones relacionadas con esta versión. En esta documentación , he descubierto que podemos agregar mixin para la altura. Lo había intentado de varias maneras pero no lo logré. Puede que la sintaxis que estoy usando esté mal. Quiero disminuir la altura de mi campo de texto. Este es mi campo de texto

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

y mi 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%;
 }

El css predeterminado aplicado es

: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;
}

La altura predeterminada aplicada al campo de texto es 56px. Lo que he intentado es

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

y

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

y también agregó mixin en el archivo de módulos de nodo como height: var (- mdc-text-field-height, 56px); y usado en css como

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

Cualquier ayuda sería muy apreciada! Gracias por adelantado.

Componentes de diseño de materiales frente a componentes web de materiales

He leído las documentaciones relacionadas con esta versión. En esta documentación , descubrí que podemos agregar mixin para la altura.

Lo primero que debe tener en cuenta aquí es que hay dos bibliotecas diferentes de componentes de material: la que se refiere es MDC (Material Design Components, distribuido en npm as @material/<component>), que es una implementación SASS + JS de componentes de Material. El otro es MWC (Material Web Components, distribuido como @material/mwc-<component>), una colección de WebComponents reales basados ​​en la biblioteca anterior. Por lo tanto, tenga en cuenta que la documentación se refiere a la contraparte MDC del componente MWC que está utilizando realmente ( <mwc-textfield>).

Estilizar desde el exterior

¿Qué intentas hacer aquí?

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

no funciona principalmente porque no es posible seleccionar dentro de la raíz de sombra de un elemento personalizado (al menos, ya no ); Además, el elemento responsable de la altura es <label>, cuya clase es .mdc-text-field.

La forma querySelector

La forma más rápida de cambiar la altura que se me ocurre es esta:

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>`;
  }
}

Sin embargo, realmente no lo recomendaría: dejando de lado el rendimiento y la elegancia, probablemente romperá algunas de las mwc-textfieldcaracterísticas, como la etiqueta flotante.

La forma de extensión

También puede imponer la altura extendiendo TextFieldy anulando los estilos:

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>

pero de nuevo, como el anterior, use bajo su propio riesgo ...

Usando el mixin

Supongo que por ahora la única forma de usar el heightmixin es crear una versión personalizada de TextField que más o menos sea así:

• clonar el repositorio de mwc (sí, es un monorepo, por lo que también obtienes todos los demás componentes, pero estoy bastante seguro de que puedes eliminar todos los no importados por mwc-textfield)
• npm install
• en packages/mwc-textfield/src/mwc-textfield.scssuso el mixin:

  @include mixins.height(45px);

  probablemente por aquí
• npm run build
• copie la carpeta mwc-textfield y péguela en su proyecto (elimine los archivos fuente, el paquete npm puede ser útil para esto), luego cambie las importaciones de @material/mwc-textfielda./path/to/custom-textfield

Ciertamente, demasiado trabajo para cambiar una altura ... La buena noticia es que MWC aún está en desarrollo y no se puede excluir que agregarán una propiedad personalizada de CSS o alguna otra forma de personalizar la altura. Además, los nuevos conceptos de densidad se están implementando en MWC (lamentablemente aún no en TextField), que podría ser justo lo que necesita.

También hay un problema abierto sobre esto, veamos qué dicen