为什么我的角度材质 css 文件不起作用？

Question

我使用角度材料创建了一个 html 文件。但组件 css 文件已不适用。

我的 html 文件；

<div class="content-container"> 

<div class="tree-container">
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="tree-node">
      <button *ngIf="node.isAction" mat-button (click)="openForm(node.name, node.parentName)">{{node.name}}</button>
    </mat-tree-node>
    
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle>
        <mat-icon>
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.name}}
      <button *ngIf="node.isAction" mat-button (click)="openForm(node.name, node.parentName)">{{node.name}}</button>
    </mat-tree-node>
  </mat-tree>

</div>

<div class="form-container" *ngIf="isFormVisible">

  <ng-container *ngComponentOutlet="selectedFormComponent"></ng-container>
</div>

我的CSS文件；

.mat-tree-node {
display: flex;
align-items: center;
flex: 1;
word-wrap: break-word;
min-height: var(--mat-tree-node-min-height);
transition: background-color 0.3s ease; 
cursor: pointer; }



.tree-container {
  flex: 1;
  max-width: 50%; 
  padding: 20px;
  background-color: #f0f0f0; 
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  overflow: hidden;  }

我没有提供整个 css 文件。 我尝试了很多类似的事情；

封装：ViewEncapsulation.None，尝试使用不同的浏览器。但他们没有工作。有人可以帮助我吗？

Answer 1

如果您需要将样式应用于主机组件，它可以与 encapsulation: ViewEncapsulation.None 一起使用。

确保您进行了以下更改：

注入 ViewEncapsulation.none 选项：

@Component({
  selector: 'app-selector',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  styleUrls: ['./app.component.scss'],
  imports: [MatTreeModule, MatIconModule, NgIf, NgComponentOutlet, MatButtonModule],
})

和风格：

app-selector {
  .mat-tree-node {
    display: flex;
    align-items: center;
    flex: 1;
    word-wrap: break-word;
    min-height: var(--mat-tree-node-min-height);
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .mat-tree {
    flex: 1;
    max-width: 50%;
    padding: 20px;
    background-color: #f0f0f0; 
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
  }
}