material-design-lite - Material Design Lite 样式输入字段

Question

我在设置 mdl-textfield 样式时遇到了一些困难。
具体来说，设置 float 标签的大小和颜色，以及按下输入字段后动画的高度和颜色。

实际上，这是我从组件列表中获取的起点。

https://jsfiddle.net/2aznyc4n/1/

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

我可以通过添加到 html 中的标签来设置 float 标签的大小和颜色

style="font-size:x-large; color:purple"

那么，如果这是在 css 中设置的，那么当标签 float 时，这是否存在某种错误？如果我在 html 中设置样式 和 css，然后他们两个突然有效果。我只是无法解决这个问题。

如果一切可能，我想避免在我的 html 中使用样式。

我一直在挖掘源代码，但没有成功弄清楚 mdl-js-textfield 颜色和高度的样式。

Answer 1

MDL 的定制有点乏味。一开始你可以选择你的主色和强调色，并拥有一组有用和漂亮的组件，但是当你需要稍微定制一些东西时，困难就出来了。

我挖掘了 MDL 源代码以找到哪些类添加了颜色和字体大小样式。我解决了调整颜色和字体大小的 float 输入文本的需要，在我的 css 中添加了这个黑客代码。

  .mdl-textfield{ input[type="text"]{ font-size: 24px; color: @color500;} }
  .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
    font-size: 14px;
    top: -5px; //Manages floating label fly
  }
  .mdl-textfield__label{ font-size: 24px; top: 20px; color: @color500;}