javascript - Angular Material 自定义类按钮问题

Question

我正在尝试为 Angular Material 按钮编写一个自定义类，但是有一个问题，当我单击按钮并从浏览器中移开(最小化或激活另一个窗口)时，它会淡出或使其消失白色，当我单击浏览器窗口时，它会变成正确的形状/颜色，不知道原因，但如何控制它没有人有任何想法。我的 CSS 类:

.DeleteBtn.md-raised {
  color: #fff;
  background-color: #CC090F;
  text-transform: initial;
  min-width: 88px;
  margin: 6px 0px;
  max-width: 8px;
  font-size: 12px;
}

.DeleteBtn.md-raised:not([disabled]):hover {
  color: #fff;
  background-color: #7F0509;
  max-width: 10px;
  font-size: 12px;
}

<md-button class="md-raised DeleteBtn">Delete</md-button>

Answer 1

您缺少所有组件的 CSS 基类 .md-button 。这是一个有效的 CSS 片段:

.md-button.DeleteBtn.md-raised:not([disabled]).md-focused,.md-button.DeleteBtn.md-raised {
  color: #fff;
  background-color: #CC090F;
  text-transform: initial;
  min-width: 88px;
  margin: 6px 0px;
  max-width: 8px;
  font-size: 12px;
}

.md-button.DeleteBtn.md-raised:not([disabled]):hover {
  color: #fff;
  background-color: #7F0509;
  max-width: 10px;
  font-size: 12px;
}

我建议阅读更多有关 <md-button> 的内容。 CSS并遵循最佳实践。这里还有一个适合您的工作示例: https://codepen.io/anon/pen/ybdzZJ希望这会对您有所帮助。祝你好运:)