我使用Thingsboard庫中的一個小部件來更新一個共享屬性值。這個小部件允許通過設置進行定制，但是我只能更新背景和標題顏色。由于我選擇了深藍色配色方案，可編輯文本框中的默認黑色文本不容易看到。我需要更新屬性，以便文本框內的文本是白色的。

在Chrome上以開發模式檢查小部件后，我發現負責顏色的CSS屬性是:

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

然后在小工具設置中，我添加了這個來嘗試更新顏色:

.mdc-text-field__input  {
    color:white;
}

當我重新加載頁面時，顏色沒有更新，在開發控制臺中，我看到我添加的CSS屬性被劃掉了:

默認的小部件CSS屬性有:

.attribute-update-form {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.attribute-update-form__grid {
    display: flex;
}
.grid__element:first-child {
    flex: 1;
}
.grid__element:last-child {
    align-items: center;
    margin-left: 7px;
}
.grid__element {
    display: flex;
}

.attribute-update-form .mat-button.mat-icon-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 20px;
}

.tb-image-preview-container div,
.tb-flow-drop label {
    font-size: 16px !important;
}

.attribute-update-form .mat-icon-button mat-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    font-size: 20px;
}

.tb-toast {
    font-size: 14px!important;
}

我該怎么做？我有C語言背景，所以我對javascript和CSS的了解很基本，但是我真的想學習更多。

給！重要的是染成白色

color: white !important;