To style an input type file, the recommended approach is to create an overlay element that corresponds with the input type file.
When working with Material design, you have the ability to style almost everything related to material components. While you can apply Material classes to custom components, it's not the primary purpose of Material design.
Here's a simple example:
<mat-card></mat-card>
For styling inputs in Material design, consider creating something like this:
HTML:
<mat-card class="input-container">
<button #file mat-flat-button color="primary">Browse...
<input multiple (change)="onFileSelected($event)" style="opacity: 0; position:absolute; left:0px; top:0px; width:100%; height:100%;" type="file"/>
</button>
{{files|json}}
</mat-card>
TS:
files: string[] = [];
onFileSelected(event) {
if (event.target.files.length > 0) {
for (let i = 0; i < event.target.files.length; i++) {
this.files.push(event.target.files[i].name);
console.log(event.target.files[0].name);
}
}
}
CSS:
.input-container {
position:relative;
}
This serves as a basic illustration.
However, using an npm package such as https://www.npmjs.com/package/ngx-dropzone may be preferable.