如何在角度5中禁用或覆盖cdk-focused

Question

我正在研究mat-button-toggle-group，我通过覆盖mat-button-toggle-checked类来修改现有的css，如下所示。现在，当我在按钮之间切换时，css不工作，直到我得到焦点，这是因为当点击的按钮处于焦点时，正在添加2个cdk类'cdk-focused'和'cdk-program-focused'。有没有什么方法可以让这些类禁用或使它们不适用或用mat-button-toggle-checked的相同css覆盖它们？

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

和css

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

Answer 1

您可以使用Angular CDK's FocusMonitor service 通过调用服务的.cdk-focused方法来禁用.cdk-program-focused和stopMonitoring()类。

关于此＆API的文档可以分别在以下链接中找到：
1）FocusMonitor documentation＆
2）FocusMonitor API

  

我遇到的问题：

我的sidenav具有使用* ngFor创建的4个按钮。每个按钮也是一个routerLink。仅其路由器链接处于活动状态的按钮应具有主背景色。

现在，如果与我的第四个按钮关联的routerLink处于活动状态，这会引起混乱，因为由于{{1}，第四个按钮将具有primary background color而第一个按钮具有focused styling }和.cdk-focused类由按钮上的.cdk-program-focused应用。

  

解决方案：

FocusMonitor

您可以查看针对您的需求量身定制的文档。

Answer 2

我使用侧导航组件遇到了同样的问题。

在阅读了Aravind在How to use EventEmitter(onClose) of the sidenav提供的解决方案后，我决定调用以下方法：

onSideNavOpened() {
    let buttonsList = document.getElementsByClassName('mat-button');

    for(let currentButton of buttonsList) {
      currentButton.classList.remove("cdk-focused");
      currentButton.classList.remove("cdk-program-focused");
    }
  }

也许你可以在你的ngOnInit（）方法中做大致相同的事情吗？

（为了记录，我的开放侧导航标签如下所示： <mat-sidenav #snav class="menu-sidenav" mode="over" position="end" opened="false" (open)="onSideNavOpened()">）

Answer 3

在我的情况下，真正的问题仍然存在于按钮结构中，“材料”构建各种子组件，最后一个是CSS类“ mat-button-focus-overlay”的“ div”：

我的解决方案很简单，在'style.css'文件中，添加或订阅'mat-button-focus-overlay'

.mat-button-focus-overlay { 
background-color: transparent!important; 
}

Answer 4

摆脱轮廓的最简单方法是添加

，该轮廓是由cdk聚焦，cdk程序聚焦，cdk鼠标聚焦和cdk touch聚焦创建的。

button:focus { outline: none; }

在您的styles.css文件中

之前

之后

Answer 5

向下滚动到粗体文字以获取答案。

良好的做法是在更改元素的样式时不按元素引用，而是按类引用。 例如，而不是使用：

mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

你会写

.mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

同样，这只是一种很好的做法。

另一件重要的事情（没有双关语意思）是指出你应该避免使用!important。一般来说，这应保留用于特殊边缘情况（如打印）。这是因为它可能导致更难维护样式表。一个很好的例子就是想要改变这个问题的边界：

.mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
}

因为覆盖!important的唯一方法是另一个!important。

您的答案的可能解决方案

有一个material-theme-overrides.scss文件，它基本上覆盖了类的样式。当您希望所有类在默认情况下以这种方式运行时，此方法是理想的。就像你想让你的所有.mat按钮都有一个半径一样。材料提供了一个很好的指导： https://material.angular.io/guide/theming

另一个选项 使用::ng-deep这可以将样式强制缩小到子组件。在这里阅读更多相关信息：

How and Where to use ::ng-deep?

Answer 6

您是否尝试将!important添加到选择器的属性中：

mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
    width:260px !important;
    height:41px !important;
    text-align: center !important;
    .mat-button-toggle-checked{
      background-color: #ffffff !important;
      font-weight: bold !important;
    }
    .mat-button-toggle{
      width:50% !important;
      font-size: 15px !important;
    }
  }

这样您就会覆盖cdk-focused和cdk-program-focused类。

Answer 7

懒惰者的CSS方法：

.your-elements-class-name:focus {
  outline: 0px solid transparent;
}

Answer 8

最简单的“禁用”只是将以下CSS覆盖添加到您的组件中。

:host {
  /deep/ .mat-button-toggle-focus-overlay {
    display: none;    
  }
}

Answer 9

我使用cdk-focused和!important的类css选择器解决了这个问题：

.cdk-focused {
  background-color: transparent!important;
}

Answer 10

如果按钮由父mat元素包含，则可以使用某些元素的autoFocus @input属性来禁用自动对焦。 例如，mat dialog或mat sidenav拥有它。

Answer 11

对于以cdk为重点的类作为问题的基础，请使用：

.cdk-focused, .cdk-mouse-focused {
  outline: 0 !important;
}

Answer 12

你可以做到 如果你使用 sass：

::host {
  &::ng-deep {
    .cdk-program-focused {
      background-color: transparent !important;
    }
  }
}