如何覆盖Thingsboard组件CSS中的默认文本颜色属性？

问题原因 #

你遇到的是CSS优先级问题：默认样式的选择器.tb-default .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input比你写的.mdc-text-field__input更具体，优先级更高，所以你的样式被浏览器忽略了（表现为控制台中属性被划掉）。

解决方案 #

使用和默认样式相同或优先级更高的选择器来定义你的样式，这样就能覆盖默认值：

.tb-default .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: white;
}

如果上述代码仍然不生效，可以尝试添加!important强制覆盖（不推荐滥用，但在组件样式被封装的场景下可以临时解决问题）：

.tb-default .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: white !important;
}

基础CSS知识补充（针对你的C语言背景） #

CSS的优先级规则可以简单理解为：选择器越具体，优先级越高。比如：

• 单个类选择器（.mdc-text-field__input）优先级 < 多个类组合的选择器（.tb-default .mdc-text-field .mdc-text-field__input）
• 带有:not()伪类的选择器不降低优先级，和普通类选择器权重一致

当多个样式作用于同一个元素时，浏览器会优先应用优先级高的样式；优先级相同时，后加载的样式会覆盖先加载的样式。

内容的提问来源于stack exchange，提问作者jabroni