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

Question

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

我有：

Angular 11、Angular Material 8 和如下文件输入：

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

我需要什么：

我需要自定义这个按钮的颜色、文本和大小。

如何定制？谢谢。

Answer 1

最终用这种方式解决了（适用于 Angular Material 和 Bootstrap）：

我设置了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 更改样式。

input[type=file]::file-selector-button {
  cursor: pointer;
  border: 0;
  padding: 8px;
  background-color: rgb(91, 105, 194);
  border-radius: 8px;
  color: white;
}

input[type=file]::file-selector-button:hover {
  background-color: rgb(54, 61, 115);
}

<div>
  <input
    type="file"
    [accept]="'.csv'"
    multiple
    id="file-upload-multiple"/>
  <label class="custom-file-label">Select file</label>
</div>

Answer 4

在你的

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>