如何自定义/覆盖Vuetify组件CSS？以v-text-field为例

Great question! When working with Vuetify components, you need to work around their auto-generated DOM structure while keeping core functionality (like label floating, input validation, and state handling) intact. Here are several reliable methods to fully customize your v-text-field's CSS:

If you're using <style scoped> in your Vue component (which you should to avoid style leaks), you'll need a way to "penetrate" Vuetify's nested DOM structure. Vue provides deep selectors for this purpose—use ::v-deep (Vue 3) or /deep/ (Vue 2) to target elements inside the v-text-field without breaking scoping.

For example, targeting the input, floating label, and focused state using your generated HTML structure:

<style scoped>
/* Style the raw input element */
::v-deep .v-text-field__slot input {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 1rem;
}

/* Customize the floating label */
::v-deep .v-label.theme--light {
  color: #666;
  font-weight: 400;
  /* Adjust label position if needed */
  transform: translateY(-20px) scale(0.85);
}

/* Style the input when it's focused/has content */
::v-deep .v-input--has-state .v-text-field__slot input {
  border-color: #90C143;
  box-shadow: 0 0 0 2px rgba(144, 193, 67, 0.15);
}

/* Customize the trailing icon container */
::v-deep .v-input__icon {
  color: #90C143;
}
</style>

For more targeted styling (so your changes only apply to this specific input), add a custom class to the component itself. This avoids accidentally styling other v-text-field instances in your app.

First, update your Vue template:

<v-text-field 
  v-model="email"
  name="email" 
  type="email" 
  color="#90C143" 
  label="Email"
  class="custom-email-input" <!-- Add this custom class -->
>
</v-text-field>

Then style it (use ::v-deep if your styles are scoped):

/* If using scoped styles */
::v-deep .custom-email-input .v-text-field__slot input {
  background-color: #f9fafb;
}

/* Style label only for this input when focused */
::v-deep .custom-email-input.v-input--has-state .v-label {
  color: #90C143;
  font-weight: 500;
}

/* Hover state for the input */
::v-deep .custom-email-input:hover .v-text-field__slot input {
  border-color: #b0d86c;
}

If you want all v-text-field components in your app to share this custom style, override Vuetify's built-in theme variables. This is the most "Vuetify-native" approach and avoids writing lots of custom CSS.

In your Vuetify configuration file (typically src/plugins/vuetify.js):

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#90C143', // Sets default accent color for inputs, buttons, etc.
        },
        variables: {
          'text-field-border-radius': '6px',
          'text-field-input-padding': '10px 14px',
          'label-color': '#666',
          'label-focused-color': '#90C143',
          // Explore more variables in Vuetify's source code for fine-grained control
        }
      }
    }
  }
})

Don't forget to style edge cases to keep functionality intact:

/* Style error state */
::v-deep .custom-email-input.v-input--error .v-label {
  color: #dc3545;
}

::v-deep .custom-email-input.v-input--error .v-text-field__slot input {
  border-color: #dc3545;
}

/* Style disabled input */
::v-deep .custom-email-input.v-input--disabled .v-text-field__slot input {
  background-color: #e9ecef;
  cursor: not-allowed;
}

Key Tips to Avoid Breaking Functionality #

• Never directly override global Vuetify classes (like .v-text-field) without a custom class prefix—this will affect every input in your app and cause unexpected behavior.
• Test all states: focused, empty, filled, error, disabled, and hover to ensure labels float correctly and validation feedback works as intended.
• Use browser dev tools to inspect the generated DOM (like you did!) to find the exact classes and elements you need to target.

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