Can not change the hint color of the v-text-field and v-select in Node-RED

Dashboard
,
1

Hi, sir

Here is my code, and it is strange that the hint color is changed to orange in VPlay, however the hint color remains the same in my dashboard2.

Pls find this picture for the difference:

image
image1764Ă—758 88.3 KB

<template>
  <div class="wrapperPara" ref="wrapper">
    <v-card v-for="(parameter,index) in item.paraItems" :key="index" ref="cards" class="cardPara">
      <v-card-text class="card-contentPara">
        <div class="containerPara">.
          <div class="leftPara">
            <i class="iconPara">{{ item.houseIcon }}</i>
          </div>
          <div class="middlePara">
            <div class="titlePara">{{ parameter.name }}</div>
            <div v-if="parameter.name!=='variable' && parameter.name!=='signal' "class="control-row">
              <button class="btnPara" :style="{ height:'25px', backgroundColor: parameter.isFixedValue ? '#90a4ae' : 'rgb(0, 204, 255)'  }"  @click="onFixed(index)">FIXED VALUE</button>
              <button class="btnPara" :style="{ height:'25px', backgroundColor: parameter.isFixedValue ?  'rgb(0, 204, 255)':'#90a4ae'  }"  @click="onVariable(index)">VARIABLE</button>
            </div>
            <div v-if="(parameter.name!=='variable' && parameter.name!=='signal') && parameter.isFixedValue===false " class="control-row">
              <v-text-field  v-model="parameter.value" hint="Please input the value" persistent-hint class="paramsPara"></v-text-field>
              <v-text-field readonly class="paramsPara2">
                mm/s
              </v-text-field>
            </div>
            <div v-else class="control-row">
              <v-select  hint="Plsease select the item" persistent-hint :items="variableNames" class="paramsPara">
              </v-select>
            </div>
          </div>
        </div>
      </v-card-text>

    </v-card>
  </div>
</template>


<script>
  export default {
  data() {
    return {
      variableNames:
      [
        'variable1',
        'variable2'
      ],
      item:
        {
          id:1,
          title: "Init position",
          houseIcon: "🏠",
          paraItems:[
          {
            type: "INPUT",
            name: "velocity",
            value: 100,
            isFixedValue: true
          },
          {
            type: "INPUT",
            name: "acceleration",
            value: 1000,
            isFixedValue: true
          },
          
          ]
          
        }
    };
  },
  methods: {
    // Initialize the value
    makeItem(payload) {
      this.item.id=payload.id;
      this.item.title= payload.title;
      this.item.houseIcon= payload.houseIcon;
      this.item.locationIcon= payload.locationIcon;
      this.item.paraItems=[];
      payload.paraItems.forEach((item, idx) => {
        this.item.paraItems.push(
          {            
            type: item.type,
            name: item.name,
            value: item.value,
            isFixedValue: false
          }
        )
        })
    },
    // Select the card
    onFixed(index) {
      this.item.paraItems[index].isFixedValue = false;
    },
    onVariable(index) {
      this.item.paraItems[index].isFixedValue = true;
    }
  },
  mounted() {
    //this.layoutGrid();
  },
  watch: {
        msg: function () 
        {
          if(this.msg.topic==="New parameters")
          {
            this.makeItem(this.msg.payload);
          }
        },
        deep:true
        }   
};
</script>

<style scoped>
  .wrapperPara {
    flex-direction: coloumn;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
    overflow-y: auto;
    height: 100%;
    position: relative;
    border: none;

  }

  .cardPara {
    width: 100%;
    height: 150px;
    padding: 0;
    border: none;
  }

  .card-contentPara {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .containerPara {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    border: none;
    font-family: Arial, sans-serif;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: space-between;
    padding: 8px;
    position: relative;
  }

  .leftPara {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  .iconPara {
    margin: 0 3px;
    font-size: 14px;
  }

  .middlePara {
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
  }

  .titlePara {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 20px;
  }
  .control-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .paramsPara {
    flex: 4;
    font-size: 13px;
    color: #444;
    margin:0;
  }
  .paramsPara:deep(.v-messages__message) {
    color: #ff9800 !important;
  }
  .paramsPara2 {
    flex: 1;
    font-size: 13px;
  }
  .btnPara {
    flex: 1;
    color:white;
    font-weight: bold;
    font-size: 16px;
    min-width: 0;
  }
</style>
2

Try

  .paramsPara .v-messages__message {
    color: #ff9800 !important;
  }