mwcテキストフィールドに高さのミックスインを追加する方法は？

私はポリマー3とlit-element（2.2.1）を使用しています。mwc-textfieldのバージョンは0.13.0です。このバージョンに関連するドキュメントを読みました。このドキュメントでは、高さにミックスインを追加できることがわかりました。私はいくつかの方法を試しましたが、成功しませんでした。私が使用している構文が間違っている可能性があります。テキストフィールドの高さを低くしたい。これは私のテキストフィールドです

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

テキストフィールドに適用されるデフォルトの高さは56pxです。私が試したのは

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

そして

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

また、ノードモジュールファイルにheight：var（-mdc-text-field-height、56px）;としてmixinを追加しました。 そしてCSSで使用されます

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

どんな助けでも大歓迎です！前もって感謝します。

マテリアルデザインコンポーネントとマテリアルウェブコンポーネント

このバージョンに関連するドキュメントを読みました。このドキュメントでは、高さにミックスインを追加できることがわかりました。

ここで最初に注意する点は、マテリアルコンポーネントの2つの異なるライブラリがあることです。あなたが参照しているのは、MDC（マテリアルデザインコンポーネント、npmで配布される@material/<component>）で、これはマテリアルコンポーネントのSASS + JS実装です。もう1つはMWC（Material Web Components、として配布@material/mwc-<component>）です。これは、以前のライブラリに基づいた実際のWebComponentsのコレクションです。したがって、ドキュメントは実際に使用しているMWCコンポーネントのMDCに対応していることに注意してください（<mwc-textfield>）。

外からスタイリング

ここで何をしようとしているのか

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

カスタム要素のシャドウルートの内部を選択できないため、主に機能しません（少なくとも、もう不可能です）。また、高さを担当する要素はで<label>、そのクラスは.mdc-text-fieldです。

querySelectorの方法

私の頭に浮かぶ高さを変更する最も速い方法はこれです：

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フローティングラベルなどの一部の機能が損なわれる可能性があります。

延長方法

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>

しかし、再び、上記のように、あなた自身の責任で使用してください...

ミックスインの使用

今のところ、heightミックスインを使用する唯一の方法は、多かれ少なかれ次のようなカスタマイズされたバージョンのTextFieldを構築することだと思います。

• クローン mwcリポジトリのます（そうです、monorepoなので他のすべてのコンポーネントも取得できますが、mwc-textfieldでインポートされなかったものはすべて削除できると確信しています）。
• npmインストール
• に packages/mwc-textfield/src/mwc-textfield.scss使用のmixin：

  @include mixins.height(45px);

  おそらく周りここに
• npm run build
• mwc-textfieldフォルダーをコピーしてプロジェクトに貼り付け（ソースファイルを削除します。これにはnpmパックが便利な場合があります）、インポートをから@material/mwc-textfieldに変更します./path/to/custom-textfield

高さを変更するには確かに多くの作業が必要です...良いニュースはMWCがまだ開発中であり、高さをカスタマイズするためにCSSカスタムプロパティまたは他の方法を追加することを除外できません。また、MWCには新しい密度の概念が実装されています（残念ながら、TextFieldにはまだ実装されていません）。

これについても未解決の問題があります。彼らの発言を見てみましょう