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

Question

我正在使用聚合物 3 和 lit-element(2.2.1)。mwc-textfield 的版本是 0.13.0。我已经阅读了与此版本相关的文档。在此文档中，我发现我们可以为高度添加 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 Design 组件与 Material Web 组件

\n

\n

我已经阅读了与该版本相关的文档。在本文档中，我发现我们可以添加混合高度。

\n

\n

这里首先要注意的是，有两个不同的材料组件库：您所指的一个是 MDC（Material Design Components，分布在 npm as 上@material/<component>），它是 Material 组件的 SASS+JS 实现。另一个是MWC（Material Web Components，分布为），它是基于前一个库的实际WebComponents@material/mwc-<component>的集合。因此请记住，该文档指的是您实际使用的 MWC 组件的 MDC 对应部分 ( )。<mwc-textfield>

\n

从外面看造型

\n

你想在这里做什么

\n

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

\n

不起作用主要是因为在自定义元素的影子根内部进行选择是不可能的（至少现在不再是）；另外，负责高度的元素是<label>，其类是.mdc-text-field。

\n

querySelector方式

\n

我想到的改变高度的最快方法是：

\n

import { LitElement, html, property, customElement, css, query } from \'lit-element\';\nimport \'@material/mwc-textfield\';\n\n@customElement(\'my-component\')\nexport class MyComponent extends LitElement {\n  // Select the text field\n  @query(\'mwc-textfield\') textField;\n\n  async firstUpdated() {\n    // Wait for its dom to be ready\n    await this.textField.updateComplete;\n    // Programmatically select the label\n    // and change the height\n    this.textField\n    .shadowRoot\n    .querySelector(\'.mdc-text-field\')\n    .style\n    .height = \'45px\';\n  }\n\n  render() {\n    return html`<mwc-textfield></mwc-textfield>`;\n  }\n}\n

\n

但是我真的不推荐它：除了性能和优雅之外，它可能会破坏一些mwc-textfield功能，例如浮动标签。

\n

延伸方式

\n

TextField您还可以通过扩展和覆盖样式来强制高度：

\n

import {LitElement, html, customElement, css} from \'lit-element\';\nimport {TextField} from \'@material/mwc-textfield/mwc-textfield\';\n\n@customElement(\'my-textfield\')\nexport class MyTextfield extends TextField {\n  static styles = [TextField.styles, css`\n    .mdc-text-field {\n      height: 45px;\n    }\n  `];\n}\n\n// Then use <my-textfield> instead of <mwc-textfield>\n

\n

但同样，像上面一样，使用时需要您自担风险......

\n

使用混合

\n

我想目前使用heightmixin 的唯一方法是构建 TextField 的自定义版本，或多或少是这样的：

\n

\n
• 克隆mwc 存储库（是的，它是一个单一存储库，因此您也可以获得所有其他组件，但我很确定您可以删除所有未由 mwc-textfield 导入的组件）
\n
• npm 安装
\n
• 使用packages/mwc-textfield/src/mwc-textfield.scssmixin:\n

  @include mixins.height(45px);\n

  \n大概就在这附近
\n
• npm 运行构建
\n
• 复制 mwc-textfield 文件夹并将其粘贴到您的项目中（删除源文件，npm pack可能对此很方便），然后将 import\xc2\xa0from 更改@material/mwc-textfield为./path/to/custom-textfield
\n

\n

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

\n

关于这个还有一个悬而未决的问题，让我们看看他们怎么说

\n