如何覆写VuetifyJS的v-text-field？自定义样式问题求助

Got it, let's break down why your copied Vuetify v-text-field isn't working as expected and build that custom variant you want step by step.

First, the common issues you're facing usually happen because:

• You're not properly leveraging Vuetify's built-in state classes (like v-text-field--focused) to trigger style changes
• Your custom CSS has lower priority than Vuetify's default styles
• You missed key style properties that control the label positioning and outline visibility in default state

Here's a working implementation that matches your requirements #

We'll extend Vuetify's base v-text-field so we can reuse its built-in state management (focus, dirty states) instead of building everything from scratch.

Full Component Code

<template>
  <v-text-field
    v-model="inputValue"
    label="Custom Input"
    placeholder="Type something here..."
    class="custom-floating-label-field"
    outlined
    hide-details
  ></v-text-field>
</template>

<script setup>
import { ref } from 'vue';

// Reactive value for the input
const inputValue = ref('');
</script>

<style scoped>
/* Use ::v-deep to penetrate scoped styles and target Vuetify's internal classes */
::v-deep .custom-floating-label-field {
  /* Default state styles */
  .v-input__slot {
    /* Thin initial outline */
    .v-text-field__outline {
      border-width: 1px;
      border-color: #e0e0e0;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* Label positioned on top of the outline by default */
    .v-label {
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
      color: #757575;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      pointer-events: none;
    }
  }

  /* Focused state: thick colored outline + floating label */
  &.v-text-field--focused {
    .v-input__slot {
      .v-text-field__outline {
        border-width: 2px;
        border-color: #1976d2; /* Replace with your desired focus color */
      }

      .v-label {
        top: 0;
        transform: translateY(-100%);
        font-size: 0.75rem;
        color: #1976d2; /* Match focus outline color */
      }
    }
  }

  /* Keep label floating when input has content (dirty state) */
  &.v-text-field--dirty {
    .v-input__slot .v-label {
      top: 0;
      transform: translateY(-100%);
      font-size: 0.75rem;
    }
  }
}
</style>

Key Details Explained #

1. State Class Usage: We rely on Vuetify's built-in .v-text-field--focused and .v-text-field--dirty classes to trigger style changes, so we don't have to manually track focus or input state.
2. Transition Animations: The transition property ensures the label floating and outline changes are smooth, not abrupt.
3. Style Penetration: ::v-deep lets our scoped CSS target Vuetify's internal component classes without leaking styles to other parts of your app.
4. Customization Flexibility: Swap out the color values (#e0e0e0, #1976d2) with your brand colors, or use Vuetify's theme variables like var(--v-primary-base) for consistency with your app's theme.

Troubleshooting Tips #

• If you're not using the outlined variant (e.g., using filled), adjust the CSS targets to .v-text-field__fill instead of .v-text-field__outline.
• Double-check that Vuetify is properly installed and configured in your project—missing Vuetify's base styles will break state class functionality.
• If the label still doesn't float, ensure there are no conflicting styles in your app's global CSS that override the label positioning.

内容的提问来源于stack exchange，提问作者Ansh Sarwal