html - 如何在 mwc 文本字段中为高度添加 mixin？

Question

我正在使用聚合物 3 和 lit-element(2.2.1)。 mwc-textfield 的版本是 0.13.0。我已阅读与此版本相关的文档。在此 documentation ，我发现我们可以为高度添加mixin。我尝试了几种方法，但都没有成功。可能是我使用的语法错误。我想减少我的文本字段的高度。这是我的文本字段

<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');

并且还在节点模块文件中添加了 mixin 作为 height:var(--mdc-text-field-height,56px);
并在 css 中用作

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

任何帮助将不胜感激!提前致谢。

Answer 1

Material design 组件与 Material web 组件

I have read the documentations related to this version. In this documentation, I have found that we can add mixin for height.

首先要注意的是， Material 组件有两个不同的库:您所指的一个是 MDC(Material Design Components，在 npm 上以 @material/<component> 的形式分发)，它是 Material 组件的 SASS+JS 实现。另一个是 MWC(Material Web Components，分发为 @material/mwc-<component> )，实际的集合 WebComponents基于以前的图书馆。因此请记住，文档指的是您实际使用的 MWC 组件的 MDC 对应项 ( <mwc-textfield>)。
外观造型
你想在这里做什么

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

主要是因为无法在自定义元素的阴影根中选择(至少 not anymore )；此外，负责高度的元素是 <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.textField.updateComplete;
    // Programmatically select the label
    // and change the height
    this.textField
    .shadowRoot
    .querySelector('.mdc-text-field')
    .style
    .height = '45px';
  }

  render() {
    return html`<mwc-textfield></mwc-textfield>`;
  }
}

但是我真的不推荐它:抛开性能和优雅，它可能会破坏一些 mwc-textfield float 标签等功能。
扩展方式
您还可以通过扩展 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 的唯一方法是mixin 正在构建一个自定义版本的 TextField，它或多或少是这样的:

克隆 mwc repo (是的，它是一个 monorepo，所以你也可以获得所有其他组件，但我很确定你可以删除所有未由 mwc-textfield 导入的组件)

npm 安装

在 packages/mwc-textfield/src/mwc-textfield.scss使用混合:

@include mixins.height(45px);

大概在 here 左右

npm 运行构建

复制 mwc-textfield 文件夹并将其粘贴到您的项目中(删除源文件，npm pack 可能会很方便)，然后从 @material/mwc-textfield 更改导入至./path/to/custom-textfield

改变高度当然工作量太大了……好消息是 MWC 仍在开发中，不能排除他们会添加 CSS 自定义属性或其他方式来自定义高度。此外，新的 density概念正在 MWC 中实现(遗憾的是尚未在 TextField 中实现)，这可能正是您所需要的。
还有一个开放的 issue关于这个，让我们看看他们怎么说