Solución:
Es tarde para responder a esta pregunta, pero tuve el mismo problema y pasé mucho tiempo tratando de averiguar cómo funciona. Los principales problemas fueron:
- La documentación de Angular Material sobre la personalización de componentes propios no le cuenta toda la historia como dijo Florian en su pregunta.
- No encontré un ejemplo en una discusión en línea con todos los archivos necesarios y los cambios para que funcione.
Encontré dos ejemplos útiles en Stackblitz:
- Este muestra cómo manipular elementos de fondo y primer plano de su tema.
- Este muestra cómo cambiar entre temas personalizados.
Sin embargo, necesitaba algo diferente:
- Yo quería usar propios colores.
- Quería usarlos en componentes propios en elementos como h1 o div.
- Por supuesto que quería evitar la duplicación de estilos que se recomienda pero no se explica en los documentos de temas de Angular Material.
Esta publicación en GitHub fue la que más me ayudó. Esta discusión también fue útil en términos de cambio de CSS a SCSS.
Para cualquier persona con el mismo problema, me gustaría compartir mi solución para que lo tenga todo en un solo lugar:
1. Obtenga sus definiciones de color
Suponga que desea usar # 3F51B5 como color principal y otro como color de acento. Vaya a este sitio, ingrese cada uno de sus colores y descargue las definiciones (elija “Angular JS 2 (Material 2)” y copie el contenido de $md-mcgpalette0: (___).
2. Crear theme_variables.scss y colóquelo en su directorio src.
Inserte las definiciones de color que acaba de descargar.
@import "[email protected]/material/theming";
$app-blue: (
50 : #e8eaf6,
100 : #c5cbe9,
200 : #9fa8da,
300 : #7985cb,
400 : #5c6bc0,
500 : #3f51b5,
600 : #394aae,
700 : #3140a5,
800 : #29379d,
900 : #1b278d,
A100 : #c6cbff,
A200 : #939dff,
A400 : #606eff,
A700 : #4757ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
$app-yellow: (
// repeat for your second color
);
$app-primary: mat-palette($app-blue, 500);
$app-accent: mat-palette($app-yellow, 500);
// warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);
// Custom Sass colors vars (will be available in all the project)
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);
También podría separar la paleta de las definiciones de variables en dos archivos diferentes, pero lo dejé así.
3. Crear theme.scss y ponerlo en su directorio src:
@import "[email protected]/material/theming";
@import "./theme_variables.scss";
@import "./fonts/fonts.css"; // in case you have this file for your fonts
@include mat-core();
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);
4. Crear styles.scss y ponerlo en su directorio src:
@import "./theme.scss";
// add the rest of your global styles
5. Actualización angular.json:
... "styles": [
"src/styles.scss",
"src/theme.scss"
] ...
6. En su componente, donde desee utilizar los colores del tema, cambie el nombre del archivo example.component.css a .scss y edítelo:
@import "../../theme_variables.scss";
h1
color: $primary;
h2
color: $accent;
// put the rest of your styling
7. Actualice la URL de estilo en su example.component.ts expediente:
@Component(
selector: "example",
templateUrl: "./example.component.html",
styleUrls: ["./example.component.scss"] // <-- update the file type
)
8. Cambiar a scss por sordo
Correr ng config [email protected]/angular:component.styleext scss para crear archivos scss para nuevos componentes en el futuro.
Actualización: si en la creación del componente aún no se crea ningún archivo scss, la razón puede ser que tenga que configurar extensiones scss para todos sus proyectos. Consulte esta discusión para obtener más información. Qué me ayudó: ng config projects.
Si no necesita las variables en todos los componentes, puede dejar sus archivos css así. Siempre que desee utilizar los colores del tema en un componente, cambie el archivo css a scss, importe las variables del tema y actualice el styleUrl en el componente (paso 6 + 7).
Soy bastante nuevo en Angular y probablemente hay cosas que puedes hacer mejor. Así que cualquier persona que tenga más sugerencias, hágamelo saber.
Lo describí en esta respuesta de desbordamiento de pila.
Debe poner las variables relacionadas con el tema y la creación del tema en separar archivos:
styles/_variables.scss- se puede importar en todos los archivos scss de componentes
- usos
@import '[email protected]/material/theming';para hacer disponibles mezclas específicas de materiales - contiene variables de tema típicas como
$primary,$accenty$warn - contiene uno o más
$themevariables (p. ej., a través demat-light-theme($primary, $accent, $warn);)
-
theme.scss- deberían no ser importado a cualquier otro lugar
-
incluye el núcleo y el tema de Angular Material
@import 'variables'; @include mat-core(); @include angular-material-theme($theme);
Para importar fácilmente el styles/_variables.scss en los estilos de sus componentes, debe agregar stylePreprocessorOptions al angular.json expediente:
"styles": [
"src/styles.scss",
"src/theme.scss"
],
"stylePreprocessorOptions":
"includePaths": [
"src/styles"
]
,
Ahora puede importar sus variables personalizadas y variables de tema en su componente y usar también mezclas específicas de materiales como mat-color:
@import 'variables';
$background: map-get($theme, background);
.custom-class-a
background-color: mat-color($background, card);
color: mat-color($mat-green, 700);
Te mostramos comentarios y valoraciones
Eres capaz de animar nuestro cometido ejecutando un comentario o dejando una valoración te damos las gracias.