Ant Design of Vue 如何使用style重写样式

Ant Design of Vue 提供了多种方式来重写样式，以下列出了几种常用的方式：

1. 使用 `class` 和 `style` 属性覆盖默认样式。你可以通过添加 `class` 或 `style` 属性来覆盖默认样式，例如：

<template>
  <a-button class="my-button" style="background-color: red;">Custom Button</a-button>
</template>

<style>
.my-button {
  color: white;
  border-radius: 0;
}
</style>

2. 使用 `::v-deep` 或 `/deep/` 来穿透样式。你可以使用 `::v-deep` 或 `/deep/` 选择器来穿透组件的样式作用域，例如：

<template>
  <a-button class="my-button">Custom Button</a-button>
</template>

<style>
::v-deep .my-button {
  color: white;
  background-color: red;
  border-radius: 0;
}
</style>

3. 使用 `theme` 变量来定制主题。你可以通过修改 `theme` 变量来定制主题，例如：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);

app.config.globalProperties.$theme = {
  'primary-color': '#1890ff',
  'link-color': '#1890ff',
  'success-color': '#52c41a',
  'warning-color': '#faad14',
  'error-color': '#f5222d',
  'font-size-base': '14px',
  'border-radius-base': '4px',
};

在上面的例子中，我们将 `theme` 变量设置为一个包含多个主题变量的对象。这些变量将被用于覆盖默认的样式。你可以在组件中使用 `$theme` 对象中定义的变量，例如：

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button type="danger">Danger Button</a-button>
</template>

<style>
button.ant-btn-primary {
  background-color: $theme['primary-color'];
}

button.ant-btn-danger {
  background-color: $theme['error-color'];
}
</style>

通过上述方式，你可以方便地定制 Ant Design of Vue 的样式。