时间戳

首页 > 解决方案 > 如何从 Material Icon Buttons 中删除边框和背景

angular - 如何从 Material Icon Buttons 中删除边框和背景

问题描述

我正在建立一个新项目。我已经通过 NPM 安装了 Angular 和 Material。然后我从这个页面设置一个工具栏：https ://material.angular.io/components/toolbar/overview

我复制/粘贴了一个示例工具栏：

navbar.component.html

  <mat-toolbar color="primary">
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
      <mat-icon>menu</mat-icon>
    </button>
    <span>My App</span>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon" 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>

整体布局看起来不错。但是图标按钮上有一个边框。

带边框的图标

它们似乎来自默认的 chrome 样式表。在开发工具中，它们具有继承自的边框和颜色属性user agent stylesheet

    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;

我尝试安装normalize.css时认为只需要设置浏览器默认值。但这对此事没有任何影响。

文档说这mat-icon-button应该是一个带有透明背景的圆形边界。我错过了一些设置吗？

我创建了一个新应用程序，ng new我唯一要做的自定义事情是通过共享模块导入材料资源。

工具栏本身navbar在我的核心模块中的组件中。

app.component.html

<app-navbar></app-navbar>

共享模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';

const materialModules = [
  MatIconModule,
  MatToolbarModule,
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [...materialModules]
})
export class SharedModule { }

标签： angularangular-material

解决方案

确保您包含一个主题并且不要忘记导入MatButtonModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';

const materialModules = [
  MatIconModule,
  MatToolbarModule,
  MatButtonModule
];


@NgModule({
  declarations: [],
  imports: [
CommonModule,
...materialModules
  ],
  exports: [...materialModules]
})
export class SharedModule { }

推荐阅读