如何覆盖小部件的CSS中的默认颜色属性?

huangapple go评论53阅读模式
英文:

How to override the default color properties in the CSS of a Widget?

问题

以下是翻译好的部分:

我正在使用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知识相对基础,但我真的想学更多。

英文:

I am using a widget from Thingsboard's library to update a shared attribute value. The widget allows for customization through the settings, but I am only able to update the background and title colors. The default black text color in the editable text box is not easily visible due to my chosen dark blue color scheme. I need to update the properties so that the text inside the text box is white.

After inspecting the widget in dev mode on Chrome, I found that the CSS property responsible for the color is:

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

Then in the widget settings, I added this to try and update the color:

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

When I reload the page, the color does not update, and in the dev console I see the CSS property I added crossed out:
如何覆盖小部件的CSS中的默认颜色属性?

The default widget CSS properties are:

.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;
}

How can I this? I come from a C background so my knowledge on javascript and CSS is pretty basic but really do want to learn more of it.

答案1

得分: 1

给予 !important 给白色颜色

color: white !important;
英文:

GIVE !Important to color white

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

 color: white !important;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月16日 15:09:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76487738.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定