Why my angular material css file not working?

Question

I created a html file using angular material. But components css file has won't apply.

My html file ;

<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>

My css file ;

.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;  }

I didn't provide my whole css file. I tried so many thing like ;

encapsulation: ViewEncapsulation.None, trying with different browser. But they didn't work. Can anyone help me?

Answer 1

It works with encapsulation: ViewEncapsulation.None if you need to apply styles to the host component.

Make sure your have these changes:

Inject ViewEncapsulation.none option :

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

And styles :

  .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;
  }