Как добавить миксин для высоты в текстовое поле mwc?

Компоненты Material Design и веб-компоненты Material

Я прочитал документацию, относящуюся к этой версии. В этой документации я обнаружил, что мы можем добавить миксин для высоты.

Первое, на что следует обратить внимание, это наличие двух разных библиотек компонентов материалов: та, на которую вы ссылаетесь, — это MDC (компоненты дизайна материалов, распространяемые на npm как @material/<component>), которая является реализацией компонентов материала SASS+JS. Другой — MWC (материальные веб-компоненты, распространяемые как @material/mwc-<component>), набор фактических веб-компонентов. на основе бывшей библиотеки. Поэтому имейте в виду, что документация относится к MDC-аналогу компонента MWC, который вы фактически используете (<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 (да, это монорепозиторий, так что вы получите все другие компоненты тоже, но я уверен, что вы можете удалить все те, которые не импортированы mwc-textfield)
• установка нпм
• в packages/mwc-textfield/src/mwc-textfield.scss используйте примесь:

  @include mixins.height(45px);
  

  вероятно около здесь
• npm запустить сборку
• скопируйте папку mwc-textfield и вставьте ее в свой проект (удалите исходные файлы, npm pack может быть удобно для этого), затем измените импорт с @material/mwc-textfield на ./path/to/custom-textfield.

Конечно, слишком много работы для изменения высоты... Хорошая новость заключается в том, что MWC все еще находится в разработке, и нельзя исключать, что они добавят пользовательское свойство CSS или какой-либо другой способ настроить высоту. Кроме того, в MWC внедряются новые концепции плотности (к сожалению, пока не в TextField), что может быть именно тем, что вам нужно.

Существует также открытая проблема по этому поводу, давайте посмотри, что они говорят