angular material style not applying for standalone component

I'm using angular 19, inside login component, I used sample component and angular material button, Inside sample component also angular material button is used, but for login component, angular material button style is coming, but sample component button style is not coming

login.comp.html:

<app-sample></app-sample>
<button mat-flat-button>login btn</button>

login.module.ts:

...
@NgModule({
declarations: [
LoginComponent
],imports:[MatButtonModule,SampleComponent]
})
.....

sample.comp.html:

<button mat-flat-button>sample btn</button>

sample.comp.ts:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from 'src/app/shared/modules/translate/translate.module';

@Component({
selector: 'app-sample',
imports: [
MatInputModule, MatFormFieldModule, FormsModule,
CommonModule, ReactiveFormsModule, TranslateModule,
MatSelectModule, MatButtonModule
],
templateUrl: './sample.component.html',
styleUrl: './sample.component.scss',
standalone: true
})
export class SampleComponent {
}

angular material style is coming for login btn, but not coming for sample btn

Continue reading...