vue3修改tdesign的t-drawer样式

在 Vue3 中，如果你想要修改 TDesign 的 `TDrawer` 组件的样式，你可以通过以下几个步骤：

1. **全局样式**: 如果你想对所有 `TDrawer` 全局生效，可以创建一个全局 CSS 文件，通常放在项目根目录下的 `src/assets/css` 或者 `src/styles` 目录下。然后，你可以选择 `.tdrawer` 或者更具体的类名，如 `.tdrawer__content` 来定制样式：

.tdrawer {
  /* 定义你的样式 */
  background-color: #f0f0f0;
  width: 80%;
}

.tdrawer__content {
  padding: 20px;
  color: #666;
}

2. **局部组件样式**:
- 如果你只想在特定组件内部修改，可以在该组件的 `<style>` 标签内使用 scoped 模式，并添加自定义的 class 名：

<template>
  <tdrawer :title="title" @close="handleClose">
    <div class="custom-drawer-content">
      <!-- 内容 -->
    </div>
  </tdrawer>
</template>

<style scoped>
.custom-drawer-content {
  background-color: #fff;
  border-radius: 5px;
}
</style>

这里`.custom-drawer-content` 将覆盖默认的抽屉内容样式。

3. **使用CSS模块**:
如果你使用了 CSS Modules，记得使用相应的前缀(`::v-deep` 或 `/*deep*/) 让样式穿透到 `TDrawer` 组件内部：

<template>
  <tdrawer :title="title" @close="handleClose">
    <style scoped>
      ::v-deep .tdrawer__content {
        background-color: #fff;
      }
    </style>
    <div class="custom-drawer-content">
      <!-- 内容 -->
    </div>
  </tdrawer>
</template>