Como adicionar mixin para altura no campo de texto mwc?

Estou usando o polímero 3 e o elemento lit (2.2.1). A versão do mwc-textfield é 0.13.0. Eu li as documentações relacionadas a esta versão. Nesta documentação , descobri que podemos adicionar mixin para altura. Eu tentei de várias maneiras, mas não tive sucesso. Pode ser que a sintaxe que estou usando esteja errada. Quero diminuir a altura do meu campo de texto. Este é o meu campo de texto

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

e meu 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%;
 }

O css padrão aplicado é

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

A altura padrão aplicada ao campo de texto é 56px. O que eu tentei é

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

e

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

e também adicionou mixin no arquivo de módulos do nó como height: var (- mdc-text-field-height, 56px); e usado em css como

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

Qualquer ajuda seria muito apreciada! Desde já, obrigado.

Componentes de design de materiais vs Componentes da Web de materiais

Eu li as documentações relacionadas a esta versão. Nesta documentação , descobri que podemos adicionar mixin para altura.

A primeira coisa a observar aqui é que existem duas bibliotecas diferentes de componentes de material: a que você está se referindo é o MDC (Material Design Components, distribuído em npm as @material/<component>), que é uma implementação SASS + JS de componentes de material. O outro é o MWC (Material Web Components, distribuído como @material/mwc-<component>), uma coleção de WebComponents reais com base na biblioteca anterior. Portanto, lembre-se de que a documentação se refere à contraparte do MDC do componente MWC que você está usando ( <mwc-textfield>).

Estilo do lado de fora

O que você está tentando fazer aqui

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

não funciona principalmente porque a seleção dentro da raiz de sombra de um elemento personalizado não é possível (pelo menos, não é mais ); Além disso, o elemento responsável pela altura é o <label>, cuja classe é .mdc-text-field.

A maneira querySelector

A maneira mais rápida de alterar a altura que me vem à mente é 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>`;
  }
}

no entanto, eu realmente não recomendaria: desempenho e elegância à parte, provavelmente quebrará alguns mwc-textfieldrecursos, como o rótulo flutuante.

O caminho da extensão

Você também pode impor a altura estendendo TextFielde substituindo os 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>

mas, novamente, como acima, use por sua conta e risco ...

Usando o mixin

Acho que, por enquanto, a única maneira de usar o heightmixin é criar uma versão personalizada do TextField, que é mais ou menos assim:

• clone o repo mwc (sim, é um monorepo para que você obtenha todos os outros componentes também, mas tenho certeza que você pode excluir todos os não importados pelo mwc-textfield)
• instalação npm
• em packages/mwc-textfield/src/mwc-textfield.scssuso o mixin:

  @include mixins.height(45px);

  provavelmente por aqui
• npm run build
• copie a pasta mwc-textfield e cole-a no seu projeto (exclua os arquivos de origem, o pacote npm pode ser útil para isso) e altere as importações de @material/mwc-textfieldpara./path/to/custom-textfield

Certamente muito trabalho para alterar uma altura ... A boa notícia é que o MWC ainda está em desenvolvimento e não pode ser excluído que eles adicionem uma propriedade customizada CSS ou alguma outra maneira de personalizar a altura. Além disso, os novos conceitos de densidade estão sendo implementados no MWC (infelizmente ainda não no TextField), que pode ser exatamente o que você precisa.

Há também uma questão em aberto sobre isso, vamos ver o que eles dizem