Css 角度材质按钮与主题不匹配_Css_Angular_Angular Material

Css 角度材质按钮与主题不匹配

css angular angular-material

Css 角度材质按钮与主题不匹配,css,angular,angular-material,Css,Angular,Angular Material,我刚刚安装了Angular 10和Angular Materialsng add@Angular/material 在那里我选择了自定义主题：紫色/绿色下一步是简单地添加一个工具栏，基本上是从谷歌网站复制粘贴。但我无法安排与主题匹配的按钮。我不知道为什么会这样它应该是什么样子 my index.html <!doctype html> <html lang="en"> <head> <meta charset="

我刚刚安装了Angular 10和Angular Materials

ng add@Angular/material

在那里我选择了自定义主题：紫色/绿色

下一步是简单地添加一个工具栏，基本上是从谷歌网站复制粘贴。但我无法安排与主题匹配的按钮。我不知道为什么会这样

它应该是什么样子

my 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>

我在这里遗漏了什么？

您需要在导入中添加MatButtonModule。

您必须将主题css文件导入到css文件中**@导入“@angular/material/prebuild themes/deeppurple amber.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; }

<!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,
  ],