材料组件输入文本字段被截断答案

【问题标题】：Material Components input text field being cut off材料组件输入文本字段被截断
【发布时间】：2018-07-02 23:02:39
【问题描述】：

只是运行准系统“material-components-web”，我无法让输入字段看起来像它应该的那样。 JS 交互效果很好。主题看起来不错。但是我的领域被切断了

index.html：

<html>
 <head>
   <link rel="stylesheet" href="bundle.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
 </head>
 <body class="mdc-typography">
    <h1 class="mdc-typography--headline1">Big header</h1>
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
      <input class="mdc-text-field__input" type="text" id="input">
      <label for="input" class="mdc-floating-label">Input Label</label>
      <div class="mdc-line-ripple"></div>
    </div>

    <!-- at the bottom of the page -->
    <script src="bundle.js"></script>
</body>
</html>

app.scss：

@import "material-components-web/material-components-web";

app.js：

import * as mdc from 'material-components-web'
mdc.autoInit()

我没有拉入其他文件。没有添加其他样式。会发生什么？

【问题讨论】：

标签： material-design material-components-web

【解决方案1】：

这通常发生在.mdc-text-field__input 的box-sizing 不正确时（例如，继承父母.mdc-text-field 的边框框）。请确保 .mdc-text-field__input 具有初始 box-sizing：

.mdc-text-field__input {
  box-sizing: initial; // or content-box
}

【讨论】：

【解决方案2】：

以下内容对我有用：将以下内容添加到自定义样式表中。

.mdc-text-field {
  width: -webkit-fill-available;
  width: fill-available;
}

【讨论】：