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

但不确定如何将其添加到抽屉以更改backgorund。有什么想法吗？

Answer 1

来自Vue材料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）样式，您也必须覆盖它们。是您的实际问题＆＃34;有没有办法通过主题设置来实现？＆＃34;。如果是这样，我认为答案是否定的。

Answer 2

尝试这个我认为它为你工作

@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

Vue材料更改抽屉背景

2 个答案: