css - 如何用 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

编辑

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

组件.css

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

现在，如果您希望能够根据某些条件动态更改光标，只需通过将类绑定(bind)到条件变量来动态添加该类

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%2Fapp.component.html

初步回答

你为什么不在你的 css 中设置它？

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

或使用

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