Vue Material 修改侧边抽屉（Drawer）背景色方法求助

Hey there, since you're using Vue Material for your app, here are three straightforward ways to customize the background color of your md-app-drawer:

1. Quick Fix: Inline Style #

If you just need to tweak a single drawer without messing with global styles, add an inline style attribute directly to the component. This is perfect for testing or one-off changes:

<template>
  <div class="page-container">
    <md-app>
      <md-app-toolbar class="md-primary" md-elevation="0">
        <md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">My Title</span>
      </md-app-toolbar>
      <!-- Add inline style here -->
      <md-app-drawer :md-active.sync="menuVisible" style="background-color: #f8f9fa;">
        <!-- Your drawer content goes here -->
      </md-app-drawer>
    </md-app>
  </div>
</template>

2. Custom CSS Class (Scoped or Global) #

For more control—like applying the same style to multiple drawers—use a custom CSS class. If you're using scoped styles (which you should for component isolation), you'll need a deep selector to penetrate Vue Material's encapsulated styles:

Scoped Style Example (Vue 3) #

<style scoped>
::v-deep .custom-drawer {
  background-color: #e3f2fd;
}
</style>

Scoped Style Example (Vue 2) #

If you're still on Vue 2, use /deep/ instead of ::v-deep:

<style scoped>
/deep/ .custom-drawer {
  background-color: #e3f2fd;
}
</style>

Then apply the class to your drawer:

<md-app-drawer :md-active.sync="menuVisible" class="custom-drawer">
  <!-- Drawer content -->
</md-app-drawer>

3. Official Theme Customization (Best for Global Consistency) #

Vue Material is built around theming, so this is the recommended approach if you want to align the drawer with your app's overall design system. Configure your theme in your app's entry file (usually main.js):

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

// Register a custom theme (or modify the default)
Vue.material.theme.register('default', {
  drawer: {
    background: '#ffffff', // Set your desired background color
    textColor: '#212121'   // Optional: Adjust text color for contrast
  }
})

Then make sure your drawer uses the theme (it will use default automatically if you don't specify, but you can add md-theme explicitly):

<md-app-drawer :md-active.sync="menuVisible" md-theme="default">
  <!-- Drawer content -->
</md-app-drawer>

Each method has its use case:

• Inline styles: Fast, temporary changes
• Custom classes: Targeted, component-specific styling
• Theming: Global, consistent design across your app

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