Búsqueda de sitios web

typescript - color de fondo de formularios de Angular Material

Soy nuevo en Angular y Angular Material. Estoy creando un formulario y quiero cambiar el color de fondo, por ejemplo, a rojo.

Pero en lugar de simplemente cambiar el color de fondo, el color rojo cubre el formulario.

<form class="example-form" style="background-color:red">
  <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

Aquí hay un ejemplo en stackblitz: Ejemplo

¿Alguien puede decirme cuál es la manera correcta de establecer el color de fondo?

¡Gracias!

Respuesta #1

El color predeterminado de los elementos es rgba(0, 0, 0, 0.04). Eso es negro con 96% de transparencia. Sobre un fondo blanco es similar a rgb(245, 245, 245). Puedes agregar la regla CSS

:host ::ng-deep .mat-form-field-flex {
  background: rgb(245, 245, 245);
}

cambiar el color de fondo de los divs y mantener el color predeterminado en todos los fondos.

Ver: https://stackblitz.com/edit/angular-ka5hm7-jxen6p?file=src/app/input-overview-example.css

Respuesta #2

Dado que esperas que solo cambie el campo del formulario, agrega los estilos en el campo del formulario en lugar de en el formulario. Actualicé tu stackblitz. Revisa aquí: https://stackblitz.com/edit/angular-ka5hm7-sreotx?file=src%2Fapp%2Finput-overview-example.html

Artículos relacionados