MDL 可扩展文本字段标记更改以及如何查找现有标记名称

Question

我是 MDL 的新手，并且试图弄清楚如何在完全 pre-composed 示例之外真正使用它。

我想修改以下包含可扩展搜索字段的代码示例。我希望输入文本框的颜色在展开时是对比色，而不是与 header 相同的颜色（因为您可以在那里输入内容不太明显）。

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.cyan-indigo.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Home</a> 
        <a class="mdl-navigation__link" href="#">About</a>
        <a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
      <!-- start search form -->
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
        <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
          <i class="material-icons">search</i>
        </label>
        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" id="search-expandable" />
          <label class="mdl-textfield__label" for="search-expandable">Search text</label>
        </div>
      </div>
      <!-- end search form -->
    </div>
  </header>
</div>

我尝试替换

<input class="mdl-textfield__input" type="text" id="search-expandable" />

和

<input class="mdl-textfield__input--white" type="text" id="search-expandable" />

但这使得文本框即使在未展开时也是白色的，这看起来很有趣。

我的问题是：

如何实现搜索框展开时只改变颜色？
使用BEM命名方案，我只是猜到了 mdl-textfield__input--white 在某处定义，显然它是，因为盒子变白了。命名方案给了我一个开始猜测的地方，但是 找出什么的简单方法是什么真的已经定义了 vs 我需要自己定义什么？

我想出了如何使用浏览器开发人员工具转到给定 class 的 css 并取消缩小它，但是一旦到了那里，仍然很难找到可用的选项。然后我尝试了 mdl-textfield__input--green（糟糕），但它仍然是白色的。而且我实际上无法通过开发人员工具找到 --white 或 --green 样式定义，所以可能两者都不存在。
mdl-textfield__input--white好choice/style/name吗？名称很清楚，但是如果我将网站上的配色方案更改为白色不是很好的对比怎么办？

Answer 1

1) 使用自定义CSS修改颜色。您将需要检查活动状态和所有状态，但使用 Chrome DevTools 应该很难弄清楚。只需展开它，检查节点，看看如何在它仅展开时定位它。

2a) mdl-textfield--white肯定没有定义。我不知道那里发生了什么，但它不应该工作（除非你 not 也定义 mdl-textfield，那么我可以理解为什么它变成白色。）

2b) 要了解为每个组件定义的内容，只需访问组件文档页面即可。或者，你总是可以打开 Chrome 的 Devtools，转到 "Sources" 面板，打开 material.css（或 .min.css），然后用使用 ctrl+f 快速查找。如果你没有看到它在那里被发现，它永远不会被定义。

3) 请不要创建使用 mdl 命名空间的自定义类。这可能会与未来的添加发生冲突。创建您自己负责的类。至于命名它们，这完全取决于您喜欢哪种命名方法。我们为 MDL 选择了 BEM，因为它为第三方提供的组件提供了清晰的结构。

MDL 可扩展文本字段标记更改以及如何查找现有标记名称

MDL expandable text field markup change & how to find existing markup names

material-design-lite