Làm cách nào để thêm mixin cho chiều cao trong trường văn bản mwc?

Tôi đang sử dụng polymer 3 và phần tử lit (2.2.1). Phiên bản của mwc-textfield là 0.13.0. Tôi đã đọc các tài liệu liên quan đến phiên bản này. Trong tài liệu này , tôi thấy rằng chúng ta có thể thêm mixin cho chiều cao. Tôi đã thử một vài cách nhưng không thành công. Có thể là cú pháp tôi đang sử dụng là sai. Tôi muốn giảm chiều cao của trường văn bản của tôi. Đây là trường văn bản của tôi

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

và css của tôi

 #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 mặc định được áp dụng là

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

Chiều cao mặc định được áp dụng cho trường văn bản là 56px. Những gì tôi đã cố gắng là

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

và

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

và cũng đã thêm mixin trong tệp mô-đun nút dưới dạng height: var (- mdc-text-field-height, 56px); và được sử dụng trong css như

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

Mọi sự trợ giúp sẽ rất được trân trọng! Cảm ơn trước.

Thành phần thiết kế vật liệu vs Thành phần web vật liệu

Tôi đã đọc các tài liệu liên quan đến phiên bản này. Trong tài liệu này , tôi đã thấy rằng chúng ta có thể thêm mixin cho chiều cao.

Điều đầu tiên cần lưu ý ở đây là có hai thư viện thành phần vật liệu khác nhau: thư viện mà bạn đang đề cập đến là MDC (Thành phần thiết kế vật liệu, được phân phối trên npm dưới dạng @material/<component>) là triển khai SASS + JS của các thành phần Vật liệu. Một cái khác là MWC (Các thành phần Web vật liệu, được phân phối dưới dạng @material/mwc-<component>), một tập hợp các WebComponents thực tế dựa trên thư viện cũ. Vì vậy, hãy nhớ rằng tài liệu đề cập đến bản sao MDC của thành phần MWC mà bạn thực sự đang sử dụng ( <mwc-textfield>).

Tạo kiểu từ bên ngoài

Bạn đang cố gắng làm gì ở đây

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

không hoạt động chủ yếu vì không thể chọn bên trong bóng gốc của phần tử tùy chỉnh (ít nhất là không còn nữa ); Ngoài ra, yếu tố chịu trách nhiệm về chiều cao là <label>, lớp của ai .mdc-text-field.

Cách truy vấnSelector

Cách nhanh nhất để thay đổi chiều cao trong tâm trí tôi là:

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

tuy nhiên tôi thực sự không khuyến nghị điều đó: hiệu suất và sự thanh lịch sang một bên, nó có thể sẽ phá vỡ một số mwc-textfieldtính năng như nhãn nổi.

Cách mở rộng

Bạn cũng có thể thực thi chiều cao bằng cách mở rộng TextFieldvà ghi đè các kiểu:

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>

nhưng một lần nữa, như trên, sử dụng rủi ro của riêng bạn ...

Sử dụng mixin

Tôi đoán bây giờ cách duy nhất để sử dụng heightmixin là xây dựng một phiên bản TextField tùy chỉnh mà ít nhiều sẽ như thế này:

• sao chép repo mwc (vâng, đó là một monorepo để bạn cũng có được tất cả các thành phần khác, nhưng tôi khá chắc chắn rằng bạn có thể xóa tất cả các thành phần không được nhập bởi mwc-textfield)
• cài đặt npm
• trong packages/mwc-textfield/src/mwc-textfield.scssviệc sử dụng mixin:

  @include mixins.height(45px);

  có lẽ ở đây
• chạy npm xây dựng
• sao chép thư mục mwc-textfield và dán nó vào dự án của bạn (xóa các tệp nguồn, gói npm có thể có ích cho việc này), sau đó thay đổi nhập từ từ @material/mwc-textfieldsang./path/to/custom-textfield

Chắc chắn có quá nhiều công việc để thay đổi chiều cao ... Tin vui là MWC vẫn đang được phát triển và không thể loại trừ rằng họ sẽ thêm thuộc tính tùy chỉnh CSS hoặc một số cách khác để tùy chỉnh độ cao. Ngoài ra, các khái niệm mật độ mới đang được triển khai trong MWC (đáng buồn là chưa có trong TextField), đây có thể là thứ bạn cần.

Ngoài ra còn có một vấn đề mở về điều này, hãy xem họ nói gì