Vue材料更换抽屉背景

Question

我已经创建了一个vuejs应用程序，我正在使用谷歌材料设计

我在找一种改变背景颜色的方法。

<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>

            <md-app-drawer :md-active.sync="menuVisible" md-persistent="mini">
                <md-toolbar class="md-transparent" md-elevation="0">
                    <span>Navigation</span>

                    <div class="md-toolbar-section-end">
                        <md-button class="md-icon-button md-dense" @click="toggleMenu">
                            <md-icon>keyboard_arrow_left</md-icon>
                        </md-button>
                    </div>
                </md-toolbar>
                <md-list>
                    <md-list-item>
                        <md-icon>move_to_inbox</md-icon>
                        <span class="md-list-item-text">Inbox</span>
                    </md-list-item>

                    <md-list-item>
                        <md-icon>send</md-icon>
                        <span class="md-list-item-text">Sent Mail</span>
                    </md-list-item>

                    <md-list-item>
                        <md-icon>delete</md-icon>
                        <span class="md-list-item-text">Trash</span>
                    </md-list-item>

                    <md-list-item>
                        <md-icon>error</md-icon>
                        <span class="md-list-item-text">Spam</span>
                    </md-list-item>
                </md-list>
            </md-app-drawer>
            <md-app-content>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea.
            </md-app-content>
        </md-app>
    </div>
</template>

如果你添加以下内容，我会读到

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
    primary: #3fffbe, // The primary color of your brand
    accent: #1a11e8 // The secondary color of your brand
));

@import "~vue-material/dist/theme/all"; // Apply the theme

但是不知道如何将它添加到抽屉中来改变背部。有什么想法吗？

Answer 1

试试这个，我想它对你很有效。

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200), // The primary color of your application
  accent: md-get-palette-color(red, A200) // The accent or secondary color
));

@import "~vue-material/dist/theme/all"; // Apply the theme

其中A200是基于颜色权重的阴影，可以是100、200、300、400、500、600、700、800、900、A100、A200、A400或A700

Answer 2

从Vue Material docs：

Vue材质使用类来应用这些颜色意图：md-primary、md-accent和md-transparent。背景颜色由主题引擎自动应用。

这也适用于md-app-drawer组件。您可以做的是覆盖它的默认类样式。我猜它恰好在md-drawer类下，所以它是这样的：

.md-drawer {
    background: blue !important; // makes the drawer partially blue
}

md-drawer有一组子组件(如md-list)样式，您也必须覆盖这些样式。你真正的问题是“有没有办法通过主题设置？”如果是这样，我认为答案是否定的。