1

Como puedo cambiar el estilo a un componente, utilizando angular material, estoy haciendo el cambio a la directiva directamente, pero no lo toma...?

home.component.html

<md-card>
 <app-home></app-home>
</md-card>

home.component.css

md-card {
  max-width: 60px;
  margin: 0 auto;
}

2 respuestas 2

2

Cuando Angular 2 compila los estilos dentro del componente al que está vinculado también la vista, a todos los estilos, se les añade un sufijo relacionado con el componente, y como dentro de tu vista estás usando un componente externo (del paquete material) el compilador lo toma como si no tuviera relación y no le pone los mismos prefijos.

Si estás usando Angular CLI lo mejor que puedes hacer es poner el estilo que deseas cambiar de md-card en el archivo styles.css que se encuentra en la misma carpeta que main.ts, y si quieres que solo cambie ese, puedes ponerle una clase dentro de tu vista.

home.component.html

<md-card class="custom-md-card">
 <app-home></app-home>
</md-card>

styles.css

md-card.custom-md-card {
  max-width: 60px;
  margin: 0 auto;
}
1

Si quieres que el estilo se refleje en toda la aplicacion usa el archivo style.css, si quieres que solo aplique al componente en el que estas puedes asociar un archivo .css al mismo dentro del decorador (si usas angular-cli ya te crea uno vacio)

@Component({
  selector: 'mi-selector',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.