如何在按钮上使用混合大小写标签

Question

有没有办法让按钮上的标签大小写混合？我在 MDL 演示组件页面上只看到大写字母。

<button class="mdl-button mdl-js-button mdl-button--raised">
  Mixed Case Here
</button>

Answer 1

原因是 text-transform: uppercase; 在 class .mdl-button。

一个可能的解决方案是向您的按钮

添加一个新的 class my-mixed_case

<button class="mdl-button mdl-js-button mdl-button--raised my-mixed_case">
   Mixed Case Here
</button>

并定义它（重置文本转换）：

.my-mixed_case.mdl-button {
   text-transform: none;
}

How to use mixed case labels on buttons