如何用ngstyle覆盖子元素样式

Question

我需要为整个Div设置样式，但对子组件不起作用：

<div class=“myClass” [ngStyle]="{'cursor': 'not-allowed'}">
        <button class=“myButton”>
                OK
         </button>
 </div>

我该怎么做？对于这种情况相同：

<div class=“myClass” [ngStyle]="{'cursor': 'not-allowed'}">
        <button class=“myButton” [ngStyle]="{'cursor': 'default'}">
                OK
         </button>
 </div>

Answer 1

edit

在您的第一个示例中，问题是浏览器的按钮默认CSS样式比DIV的not-allowed光标更具体。如果您希望not-allowed光标均适用于DIV和子元素，则可以将notAllowed类应用于DIV，并具有这样的规则

component.css

 .notAllowed, .notAllowed *
{
  cursor: not-allowed;
}

现在，如果您想能够动态更改光标，具体取决于某种条件，只需通过将其绑定到条件变量

来动态添加类别

component.html

<div class="myClass" [class.notAllowed]="notAllowed ">
        <button class="myButton">
                OK
         </button>
 </div>

component.ts

public notAllowed = true;

我为此创建了一个stackblitz

https://stackblitz.com/edit/angular-5z9ru4?file=App/app.component.html

初始答案

为什么不将其设置在CSS中？

myClass, myClass>*{ cursor: not-allowed;}

或使用

  <div [style.cursor]="'not-allowed'"