Vuetify 自定义：深入剖析如何移除默认样式并添加个性化设计

vue.js

2024-03-02 00:28:23

自定义 Vuetify：移除默认 CSS，添加个性化样式

作为一名经验丰富的程序员和技术作家，我经常遇到移除 Vuetify 元素默认 CSS 的情况。通过这样做，我能够创建具有独特外观和感觉的应用程序，同时仍然利用 Vuetify 的强大功能。

理解 Vuetify 的 CSS 架构

Vuetify 使用基于 BEM（块、元素、修饰符）的 CSS 架构。这意味着它的 CSS 类名由三个部分组成：

块：表示组件的名称，例如 v-select
元素： 表示组件的一部分，例如 v-select__selections
修饰符： 用于修改元素的外观或行为，例如 --disabled

移除 Vuetify CSS

要移除 Vuetify 元素的默认 CSS，可以使用 v-sheet 组件，它是一个不带任何样式的通用容器。将 v-sheet 组件包裹在你想要移除样式的元素周围，如下所示：

<v-sheet>
  <v-select
    v-model="value"
    :items="sortOptions"
    item-text="text"
    :return-object="true"
  />
</v-sheet>

添加你自己的 CSS

现在你已经移除 Vuetify 元素的默认 CSS，你可以添加你自己的自定义样式。你可以创建一个新的 CSS 文件并将其链接到你的 HTML 页面，或者直接在 <style> 标签中编写你的 CSS。

覆盖 Vuetify 样式

为了覆盖 Vuetify 样式，你需要使用更具体的 CSS 选择器。你可以使用 Vuetify 的 BEM 类名或直接使用元素选择器。例如，要覆盖 v-select 的高度和宽度，你可以使用以下 CSS：

.v-select {
  height: 40px;
  width: 144px;
}

你还可以使用 !important 规则来强制你的样式优先于 Vuetify 的默认样式，如下所示：

.v-select {
  height: 40px !important;
  width: 144px !important;
}

示例代码

以下是一个示例代码，展示了如何移除 v-select 元素的默认 CSS 并添加你自己的自定义样式：

<template>
  <div>
    <v-sheet>
      <v-select
        v-model="value"
        :items="sortOptions"
        item-text="text"
        :return-object="true"
      />
    </v-sheet>
  </div>
</template>

<style lang="styl">
  .v-select {
    height: 40px !important;
    width: 144px !important;
    border: 1px solid #CCD8DB;
    border-radius: 4px;
    background-color: var(--v-dgrey-lighten3);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
  }
</style>