如何使用 Angular 材质和 CSS答案

【问题标题】：How to use Angular Material and CSS如何使用 Angular 材质和 CSS
【发布时间】：2015-12-15 16:15:19
【问题描述】：

所以我承认这非常接近一个宽泛的问题，但我认为它是一个可以接受的问题。

所以一直在玩 Angular Material，是的，它有很多很酷的东西，我喜欢在包中获得或多或少完整的 web 布局样式指南的想法（看看 http://www.google.com/design/spec/material-design/introduction.html值得一读）

我的问题是，我该如何使用调色板。我在我的 java 脚本中定义了一个调色板（如下所示）

$mdThemingProvider.definePalette('Stackit', {
    "50":"#f6f7f9",
    "100":"#c9d3d9",
    "200":"#a8b8c2",
    "300":"#7d95a5",
    "400":"#6b8798",
    "500":"#5e7787",
    "600":"#516775",
    "700":"#455763",
    "800":"#384751",
    "900":"#2c373f",
    "A100":"#f6f7f9",
    "A200":"#c9d3d9",
    "A400":"#6b8798",
    "A700":"#455763",
    'contrastDefaultColor': 'dark',    // whether, by default, text         (contrast)
    // on this palette should be dark or light
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
        '200', '300', '400', 'A100'],
    'contrastLightColors': undefined    // could also specify this if default was 'dark'
});

所以我们有一个调色板，它会自动选择其中一些颜色，例如，运行此代码，您的 md-toolbar 将改变颜色。

但是，调色板中有很多颜色，但我还没有弄清楚如何以有用的方式使用它们。

例如，我希望我的网页必须输入部分类型，一种是浅灰色的黑色文本，一种是深灰色的白色文本，每个屏幕大小大约为一半，可能还有一些图标或图片作为一些文本。

所以我通常会怎么做

<div class=dark style="height: 350px">
    Some welcome text and saying hi
</div>
<div class=light style="height: 350px">
    A nice picture and some other bits
</div>
<div class=dark style="height: 350px">
    Now lets do something with a big button
</div>

因此，在 Material Design 中，我将通过设置 layout=row 和 flex、漂亮的布局来获得 div，然后向下滚动到我的斑马线上。但是，理论上我想在我的调色板中使用颜色 100 表示浅色，使用 600 表示深色，但似乎没有办法做到这一点。是的，我可以用这些颜色创建一个 CSS 类，但这意味着整个 Palette 的东西似乎相当浪费。

【问题讨论】：

标签： angular-material

【解决方案1】：

经过一番折腾，我设法弄清楚了其中的一部分。

有一个 md-accent 选项似乎是为此目的而创建的。您确实需要先设置重音。

.accentPalette('grey')

就我而言，我只需要灰色的，但您可以使用 definePalette 定义整个调色板。因此，使用我们上面的示例，配置将如下所示：

    $mdThemingProvider.theme('default')
        .dark()
        .primaryPalette('Stackit')
        .backgroundPalette('Stackit')
        .accentPalette('grey')
        .warnPalette('red');

然后你需要做的就是在黑色背景上制作浅（灰色）文本：

<H1 class="md-accent">Prototypes</H1>

【讨论】：