css - Angular Material Buttons 与主题不匹配
问题描述
我刚刚用 Angular Materials 安装了 Angular 10ng add @angular/material
在那里我选择自定义主题:紫色/绿色
下一步是简单地添加一个工具栏,基本上是从谷歌网站复制粘贴。但我无法安排与主题匹配的按钮。我不知道为什么它看起来像这样。
它应该是什么样子
<mat-toolbar color="primary">
<button mat-icon-button aria-label="Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="nav-spacer"></span>
<button mat-icon-button class="material-icons-outlined" aria-label="Example icon-button with heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
我的风格.css
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
我的 index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
而这些进口
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
FormsModule,
MatToolbarModule,
MatIconModule,
],
请问我在这里想念什么?
解决方案
您需要在导入中添加 MatButtonModule。
推荐阅读
- amazon-web-services - 用 cloudformation 替换 terraform 部署的 lambda
- c# - 如果基于 Codeeffects 编辑器中的计算,有没有办法编写嵌套?
- javascript - 正确组合具有不同选择器 ID 的 javascript 代码
- vue.js - WebStorm 文件关联系统无法识别文件
- aws-lambda - Lambda 跨部署维护检查点
- regex - 使用 sed 和正则表达式从文件中删除文本
- json - alamofire 编码器无法获取 json
- reactjs - 如何使用键盘tab键关注Material UI Link(不使用component =“button”)
- sql - 根据每个 id 中存在的字段值计算计数:MSSQL
- ios - 我用 forEach 创建了一个 Circle,但我不知道如何检查其中的数据。/SwiftUI