Material-Ui如何在聚焦时更改文本字段/输入/标签的默认颜色？

Question

在 Material UI 的新 (v1 beta) 版本中，默认灯光主题已从浅蓝色/粉红色更改为紫色/绿色。

当文本字段在这个新版本中获得焦点时，它们的 labal/input-line 会用默认的紫色着色。

我创建了我的自定义主题并覆盖了原色，这样按钮现在是蓝色的，但标签/输入行仍然是紫色的。

我将如何更改它们的默认颜色？

Answer 1

这有点棘手，但是一旦您了解了它的工作原理以及如何使用它，事情就会变得简单。我花了 15-20 分钟使用 Chrome 开发者工具解决了这个问题，解决方案如下：

当该字段获得焦点时，它会向根添加一个新的 MuiFormLabel-focused 类。

这意味着我们在 MuiFormLabel 组件中有一个焦点属性。问题是类的优先级很高，因为它更具体，简单地改变颜色是行不通的。

因为我绝对确定我必须使用自己的颜色，所以我使用了 !important。

希望对你有帮助。