Wie füge ich ein Mixin für die Höhe im MWC-Textfeld hinzu?

Ich benutze Polymer 3 und Lit-Element (2.2.1). Die Version von mwc-textfield ist 0.13.0. Ich habe die Dokumentationen zu dieser Version gelesen. In dieser Dokumentation habe ich festgestellt, dass wir Mixin für die Höhe hinzufügen können. Ich hatte verschiedene Möglichkeiten ausprobiert, aber es gelang mir nicht. Möglicherweise ist die von mir verwendete Syntax falsch. Ich möchte die Höhe meines Textfeldes verringern. Dies ist mein Textfeld

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

und mein 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%;
 }

Das standardmäßig angewendete CSS ist

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

Die Standardhöhe für das Textfeld beträgt 56 Pixel. Was ich versucht habe ist

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

und

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

und auch Mixin in der Knotenmoduldatei als Höhe hinzugefügt : var (- mdc-text-field-height, 56px); und in CSS als verwendet

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

Jede Hilfe wäre sehr dankbar! Danke im Voraus.

Materialdesignkomponenten im Vergleich zu Materialbahnkomponenten

Ich habe die Dokumentationen zu dieser Version gelesen. In dieser Dokumentation habe ich festgestellt, dass wir Mixin für die Höhe hinzufügen können.

Das erste, was hier zu beachten ist, ist, dass es zwei verschiedene Bibliotheken von Materialkomponenten gibt: Diejenige, auf die Sie sich beziehen, ist MDC (Material Design Components, verteilt auf npm as @material/<component>), eine SASS + JS-Implementierung von Materialkomponenten. Die andere ist MWC (Material Web Components, verteilt als @material/mwc-<component>), eine Sammlung tatsächlicher WebComponents, die auf der früheren Bibliothek basiert. Beachten Sie daher, dass sich die Dokumentation auf das MDC-Gegenstück der MWC-Komponente bezieht, die Sie tatsächlich verwenden ( <mwc-textfield>).

Styling von außen

Was versuchst du hier zu tun?

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

funktioniert hauptsächlich nicht, weil die Auswahl innerhalb der Schattenwurzel eines benutzerdefinierten Elements nicht möglich ist (zumindest nicht mehr ). Das für die Höhe verantwortliche Element ist auch das <label>, dessen Klasse ist .mdc-text-field.

Die querySelector-Methode

Der schnellste Weg, um die Höhe zu ändern, die mir in den Sinn kommt, ist folgender:

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

Ich würde es jedoch wirklich nicht empfehlen: Abgesehen von Leistung und Eleganz wird es wahrscheinlich einige mwc-textfieldFunktionen wie das Floating Label zerstören.

Der Verlängerungsweg

Sie können die Höhe auch erzwingen, indem Sie TextFielddie Stile erweitern und überschreiben:

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>

aber auch hier, wie oben, auf eigenes Risiko verwenden ...

Mit dem Mixin

Ich denke, die einzige Möglichkeit, das heightMixin zu verwenden, besteht darin, eine angepasste Version von TextField zu erstellen, die mehr oder weniger so aussieht:

• Klonen Sie das MWC-Repo (Ja, es ist ein Monorepo, sodass Sie auch alle anderen Komponenten erhalten, aber ich bin mir ziemlich sicher, dass Sie alle Komponenten löschen können, die nicht von MWC-Textfield importiert wurden.)
• npm installieren
• im packages/mwc-textfield/src/mwc-textfield.scssGebrauch das Mixin:

  @include mixins.height(45px);

  wahrscheinlich hier
• npm run build
• Kopieren Sie den Ordner mwc-textfield und fügen Sie ihn in Ihr Projekt ein (löschen Sie die Quelldateien, npm pack kann hierfür hilfreich sein), und ändern Sie dann die Importe von @material/mwc-textfieldnach./path/to/custom-textfield

Sicherlich zu viel Arbeit zum Ändern einer Höhe ... Die gute Nachricht ist, dass sich MWC noch in der Entwicklung befindet und nicht ausgeschlossen werden kann, dass eine benutzerdefinierte CSS-Eigenschaft oder eine andere Möglichkeit zum Anpassen der Höhe hinzugefügt wird. Auch die neue Dichte in MWC implementiert (leider noch nicht in TextField), was genau das sein könnte, was Sie brauchen.

Es gibt auch ein offenes Thema dazu. Mal sehen, was sie sagen