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

Question

我正在使用聚合物 3 和 lit-element(2.2.1)。 mwc-textfield 的版本是 0.13.0。我已经阅读了与此 version.In 此 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;
}

应用于文本字段的默认高度为 56 像素。我试过的是

 #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 设计组件与 Material 网络组件

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 设计组件，在 npm 上作为 @material/<component>) 这是 SASS+JS 实现的 Material 组件。另一个是 MWC（Material Web Components，分布为 @material/mwc-<component>），基于前一个库的实际 WebComponents 集合。因此请记住，该文档指的是您实际使用的 MWC 组件的 MDC 副本 (<mwc-textfield>)。

外观造型

你想在这里做什么

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

不起作用主要是因为无法在自定义元素的影子根内进行选择（至少，）；另外，负责高度的元素是 <label>，其 class 是 .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 功能，例如浮动标签。

扩展方式

您还可以通过扩展 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>

但同样，与上述一样，使用风险自负...

使用mixin

我想现在使用 height mixin 的唯一方法是构建一个自定义版本的 TextField，它或多或少是这样的：

克隆 mwc repo（是的，它是一个 monorepo，因此您也可以获得所有其他组件，但我很确定您可以删除所有未由 mwc-textfield 导入的组件）
npm 安装
在packages/mwc-textfield/src/mwc-textfield.scss中使用mixin：
```
@include mixins.height(45px);
```
大概在 here
npm 运行构建
复制 mwc-textfield 文件夹并将其粘贴到您的项目中（删除源文件，npm pack 可能对此很方便），然后将导入从 @material/mwc-textfield 更改为 ./path/to/custom-textfield

当然，改变高度的工作太多了...好消息是 MWC 仍在开发中，不能排除他们会添加 CSS 自定义属性或其他一些自定义高度的方法。此外，新的 density 概念正在 MWC 中实现（遗憾的是尚未在 TextField 中实现），这可能正是您所需要的。

关于这个也有公开issue，看看他们怎么说

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

How to add mixin for height in mwc textfield?

html

web-component

polymer-3.x

lit-element

lit-html