Как избежать переопределения Vuetify по умолчанию CSS

Question

Подведите итог проблемы

Я пытаюсь реализовать Vuetify для части существующего проекта.Но после того, как я добавил Vuetify в проект.Я обнаружил, что стили CSS «по умолчанию» для одинакового поля ввода select изменены.И это делает эти поля ввода и выбирают все как обычный текст, а не поле ввода и выбирают.

Поскольку я хочу реализовать Vuetify только для части проекта, поэтому плохо, что Vuetify переопределяетCSS-правила по умолчанию.

Я ищу способ реализации Vuetify для части существующего проекта.Но остальная часть проекта должна отображаться как обычно (только с CSS по умолчанию, а не с моим собственным CSS).

Чтобы сделать Quration более ясным, я приведу пример, который показывает два выбора.Первый сделан с помощью Vuetify <v-select>, а второй - с обычным HTML-кодом <select>

Укажите фон и расскажите, что вы уже пробовали

Я уже пробовалпоставить собственные правила CSS для поля ввода и выбрать после ссылки Vuetify Script и Vuetify CSS.Но Vuetify все еще переопределяет мои пользовательские стили CSS.

Показать ваш код

HTML PART:

<div id="app">
  <div>Vuetify select:</div>
  <v-select
    :items="items"
  >
  </v-select>
  <hr/>
  <div>
    <div>Normal select:</div>
    <select>
      <option value="0">test1</option>
      <option value="1">test2</option>
      <option value="2">test3</option>
    </select>
  </div>
</div>

JS PART:

new Vue({
  el: '#app',
  data() {
    return {
      item: null,
      items: [
        {
          text: "a"
        },
        {
          text: "b"
        },
        {
          text: "c"
        },
      ]
    }
  }
})

Опишитеожидаемые и фактические результаты

Я ожидал, что смогу использовать Vuetify для некоторых частей этого проекта.Но в то же время остальная часть проекта должна работать как обычно (с CSS по умолчанию).

Answer 1

Вы можете попробовать добавить нормализованный файл CSS в ваш проект, и стиль vuetify должен применяться только тогда, когда вы этого хотите, я использую this