How to fine tune styles in vuetify 3 without !important in CSS?

Question

How can I fine tune the style for the component? I want to change the border colors for during hover, focus events, including when a validation error is present. For example, when I hover the mouse over I want the border color to be blue, and when got a validation error, I want the border color to be green when I hover the mouse again. In the picture I have shown at what events I want the border color to change.

This problem affects not only the color, but also many other settings.

I was able to do what I want through CSS, but I had to use !important everywhere.

I tried to customize this using SCSS, but I couldn't find the corresponding settings in the vuetify API. The most I was able to change via SСSS is the height of the buttons. I hope there is a better option than using SCSS as it is very slow, but if there is no other option then ok.

Just in case, here's my full SСSS code:

@use 'vuetify/settings' with (
  $button-height: 56px,
  $button-font-size: 1.125rem,
  $button-rounded-border-radius: 10px,
  $button-border-radius: 10px,

  $field-border-radius: 10px,
  $field-rounded-border-radius: 10px,
);

Answer 1

Main state and active (focused) state colors you may define in defaults for your Vuetify component.

// vuetify.ts

export const vuetify = createVuetify({
  defaults: {
    VTextField: {
      baseColor: 'grey', //main state
      color: 'pink' //focused
    },
  }
});

Hover event does not influence on color in components based on v-text-field, so here you have to use css overrides.