Question

在使用Angular CLI构建的Angular 2应用中，我在Angular 2 Material components之后设置了official installation guide。

Angular 2 Material将其主要CSS样式放在页面<head> 下面我的自定义CSS样式中。如果我需要覆盖它们，会对我产生影响。

如何强制Angular 2 Material将其核心CSS样式置于上面我在Angular CLI主（入口）CSS文件中定义的样式？

Answer 1

在root上的style.css文件中导入材质主题：

e.g。

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

你可以自己选择替换indigo-pink.css。

Answer 2

我认为您遇到的问题是由于在index.html中引用了一些css文件，并且在angular-cli.json文件中有其他文件。

以下是我的angular.cli json文件和index.html

的示例

您在index.html中定义的内容将在您在angular-cli.json文件中定义的内容之前出现。如果要对它们重新排序，请在angular-cli.json文件中包含对所有css文件的引用。

注意我的styles.css文件是angular-cli.json文件中列出的最后一个文件。

编辑（重新阅读原始问题后）

我认为你需要创建自己的自定义主题并导入它。

Per Angular Material的文档

为了使用Angular Material的工具设置自己的组件样式，必须使用Sass定义组件的样式。

您只需要在custom-component-theme.scss
中创建一个@mixin函数

请参阅Angular Material关于Theming your Own Components及其Theming Guide

的文档

Answer 3

我已经解决了通过在加载视图后加载自定义CSS的问题。

("{} "*len(x)*2).format(*np.ravel(list(zip(x,y))))

 '1 5 2 6 3 7 4 8 '

Answer 4

是的，在Angular材质中，当元素/组件加载时，它会动态添加内部CSS。因此，您无法更改其顺序。

但是要解决您的问题，可以使用CSS特定性来覆盖它。您可以在正文或应用程序组件中添加自定义类，并通过使用SCSS / CSS可以用自己的CSS覆盖材质CSS。

这里是使用SCSS的示例，用于更改复选框样式。还有project__app类名，我在应用程序组件中已经提到过。您也可以使用body代替它，或在元素的父级上创建特定的类。

.project__app
{
    /* checkbox customization */
    .mat-checkbox-layout
    {
        margin-bottom: 0px;
    }
    .mat-checkbox-inner-container
    {
        height: 20px;
        width: 20px;
    }
    .mat-checkbox-frame {
        border-color: rgba(0, 0, 0, 0.5);
        border-width: 1px;
    }
}

如何更改Angular Material 2 CSS导入订单？

4 个答案: