Angular 9-如何使用Angular Material 8.2.3设置文件输入按钮的样式

Question

我已经看到很多与此有关的问题，但没有一个解决了我的问题。

我有：

Angular 9，Angular Material 8.2.3和如下文件输入：

<div class="form-group">
    <input #myInput type="file" formControlName="fi"
                     id="fi" name="fi" (change)="postMethod($event.target.files)">
</div>

我需要：

我需要自定义此按钮的颜色，文本和大小，最好使用Angular Material而不是CSS。

如何自定义？谢谢。

Answer 1

最终通过这种方式解决（对角材料和自举有效）：

我设置了3个独立的组件：

1. 将显示的按钮（可以是Angular Material或Bootstrap之一，如下所示）
2. 文件输入
3. 将包含文件名的标签

---

HTML

<div>
  <button #file class="btn btn-light">Examinate</button>
  <div style="display: inline-block">
  <input #myInput formControlName="file"
      id="file" name="file" (change)="postMethod($event.target.files)" type="file"/>
      <p>{{file}}</p>
  </div>
</div> 

---

CSS

使用CSS，我将输入强制为按钮的[[overlay，然后设置opacity=0以使按钮可见。

-按钮：

float:left; 
position:absolute; 
z-index:-1;

-输入：

opacity: 0; //Not visible
font-size: 0;
//Button dimensions
width: 90px; 
height: 37px; 
float: left; 

-输入（悬停）：

cursor: pointer;

-标签：

float: left; 
margin-left: 6px; 
margin-top: 7px;

这是最终结果：

Answer 2

您根本无法设置输入类型文件的样式，最好的方法是创建将与输入类型文件对应的叠加元素。

使用材质，您几乎可以对所有与材质有关的样式进行样式化，当然，您可以将材质类添加到自定义组件中，但这不是材质的目的。

简单的例子，您不想这样做：

<div class="mat-card"></div>

如果可以的话：
<mat-card></mat-card>

与输入相同，如果您希望将其作为素材样式，则应创建如下所示的东西：
HTML：
<mat-card class="input-container">
  <button #file mat-flat-button color="primary">Examinar...
      <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;
}

那是一个简单的例子。
但是我仍然会喜欢使用某种npm包，例如：https://www.npmjs.com/package/ngx-dropzone

Answer 3

在您的css/scss/sass中：

#fi {
  background-color: pink;
  ...
}

这不是用Angular Material设置单个按钮样式的好方法。如果您想为组设置样式，则我建议阅读：https://material.angular.io/guide/customizing-component-styles
编辑：
类型为file的输入元素对样式而言并非微不足道。
下面是一个如何工作的示例：
 
.fileContainer {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: pink;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
    <label class="fileContainer">
      File upload
      <input type="file"/>
    </label>