Angular 材质不会将样式应用于组件 [英] Angular Materials won't apply styles to components

问题描述

这是一个简单的片段:

.profilebutton {浮动:对；}

<div class="col-md-4 profilebuttoncontainer"><button md-button [routerLink]="'/welcome/profile'" class="profilebutton">Profile</button>

我到底做错了什么?我一直在尝试从 Angular Materials 中设置工具栏、对话框、复选框的样式，但它们都不适用.我可以使用 mat-(whatever) 下的检查器更改样式，例如 mat-button、mat-dialog-container，并且可以，但是如何将其转换为 css?看来我无权修改垫子-(东西)

我想做的就是在容器的右侧贴一个 md 按钮.超级简单.

解决方案

您的代码应该按预期工作.看下面的代码，

<button md-button class="temp-class">点击我！</button>

注意:使用下面的行在组件级别添加样式表引用

styleUrls:[`....`]

现场演示

Here is a simple snippet:

.profilebutton  {
  float: right;
}

<!-- PROFILE BUTTON -->
  <div class="col-md-4 profilebuttoncontainer">
    <button md-button [routerLink]="'/welcome/profile'" class="profilebutton">Profile</button>
  </div>

What exactly am I doing wrong? I have been trying to style toolbars, dialog boxes, checkboxes all from Angular Materials but none of them apply. I can change the styling with the inspector under mat-(whatever) like mat-button, mat-dialog-container, and that works, but how do I translate that to css? It seems I don't have access to modifying the mat-(stuff)

All I want to do is stick an md-button to the right side of a container. Super simple.

解决方案

Your code should work as expected. See the below code,

<div class="profilebuttoncontainer">
     <button md-button class="temp-class">Click me!</button>
</div>

Note : Add the stylesheet reference at the component level using below line

styleUrls:[`....`]

LIVE DEMO

这篇关于Angular 材质不会将样式应用于组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！